Make sure your text and backgrounds meet accessibility standards with our free Color Contrast Ratio Checker. Enter any two colors — as hex codes, RGB values, or HSL — and instantly see your contrast ratio alongside WCAG AA and AAA pass/fail results. No login, no limits, all in your browser.
How to Check Color Contrast
- Enter your foreground (text) color in the first color field using the color picker or by typing a hex code like
#333333. - Enter your background color in the second color field.
- Your contrast ratio is calculated instantly — you'll see it displayed alongside WCAG 2.1 AA and AAA results for both normal text and large text.
- Adjust either color until you hit the pass threshold you need.
- Copy your final hex values or share the results with your team.
Why Use Flipper File to Check Color Contrast?
- Instant results — ratio and pass/fail badges update in real time as you pick colors
- WCAG 2.1 AA and AAA — checks both standards for normal text (4.5:1 / 7:1) and large text (3:1 / 4.5:1)
- Multiple color formats — accepts hex (#fff), RGB (255,255,255), and HSL input
- Color picker built in — no need to know hex codes; just click to pick
- Swap colors instantly — one click to reverse foreground and background
- Completely private — nothing leaves your browser; no data collected
Frequently Asked Questions
What is a color contrast ratio?
A color contrast ratio is a measure of the difference in luminance between two colors — typically text and its background. Ratios range from 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum contrast).
What is WCAG?
WCAG stands for the Web Content Accessibility Guidelines, published by the W3C. They define minimum contrast standards that web designers and developers should meet to ensure content is readable by users with low vision or color deficiencies.
What contrast ratio do I need to pass WCAG AA?
For WCAG 2.1 Level AA: normal-sized text needs a ratio of at least 4.5:1, and large text (18pt / 14pt bold or larger) needs at least 3:1.
What is WCAG AAA?
WCAG AAA is the enhanced standard. It requires a 7:1 ratio for normal text and 4.5:1 for large text. AAA is harder to achieve but provides a better experience for users with significant visual impairments.
Does font size affect the required contrast ratio?
Yes. WCAG considers large text (roughly 18pt regular or 14pt bold) to need a lower contrast ratio (3:1 for AA) because it's inherently easier to read at lower contrast than small text.
Can I check colors other than black and white?
Absolutely — this tool works with any two colors. Just enter your actual brand or UI colors to see if they meet the standard.
What if my design fails WCAG AA?
Try darkening the text color or lightening the background (or vice versa). The tool updates in real time, so you can nudge values until you reach a passing ratio without leaving the page.
Does this tool store my colors?
No. All calculations happen in your browser. Nothing is sent to a server or stored anywhere.