Color Contrast Checker
Check the WCAG contrast ratio between two colors and see if they pass AA or AAA accessibility levels — free, instant and fully client-side.
Contrast ratio
21.00:1
- AA text
- —
- AA large
- —
- AAA text
- —
How to check color contrast
- Enter a text color and a background color above (hex, RGB, or the color pickers).
- The preview shows your text color on your background color live.
- Read the contrast ratio and see whether it passes AA, AA Large and AAA.
Color models and WCAG levels
Contrast is measured from each color's relative luminance — a perceptual brightness value derived by linearizing the sRGB red, green and blue channels and weighting them per the WCAG formula (0.2126R + 0.7152G + 0.0722B). The ratio between the lighter and darker luminance, from 1:1 to 21:1, is then compared against three thresholds:
- AA Large (3:1) — minimum for large text (18pt+, or 14pt+ bold).
- AA (4.5:1) — minimum for normal body text; the most commonly required level.
- AAA (7:1) — an enhanced standard for maximum readability.
Why contrast matters
Low-contrast text is hard to read for users with low vision, color blindness, or anyone viewing a screen in bright sunlight. Meeting WCAG contrast levels is also a common legal and procurement requirement for websites, alongside being simply good design practice.
Related tools
- HEX to RGB converter — inspect a color's raw channels.
- HEX to HSL converter — adjust lightness to fix a failing contrast ratio.
Frequently asked questions
- What is a good contrast ratio?
- WCAG 2.x defines three tiers for text: 3:1 (AA Large, for text 18pt+ or 14pt+ bold), 4.5:1 (AA, for normal body text) and 7:1 (AAA, an enhanced standard). Higher is always more readable.
- How is the contrast ratio calculated?
- Each color's relative luminance is computed by linearizing its sRGB channels and weighting them (0.2126 red, 0.7152 green, 0.0722 blue, per the WCAG formula). The ratio is then (lighter + 0.05) / (darker + 0.05), giving a value from 1 (identical colors) to 21 (black on white).
- What is the difference between AA and AAA?
- AA is the minimum WCAG level most accessibility guidelines and laws require. AAA is a stricter, enhanced level intended for content where readability matters even more, such as government or medical sites.
- What counts as "large text" for the AA Large threshold?
- WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. Large text gets a lower required ratio (3:1) because bigger, bolder strokes stay legible at less contrast.
- Does this check colors for color-blind users?
- No — this tool checks luminance contrast only, which is the WCAG text-contrast requirement. Color-blindness-specific concerns, like relying on hue alone to convey meaning, are a separate accessibility consideration this tool does not test.
- Can I type RGB values instead of hex?
- Yes. Both fields accept a hex code (#3b82f6) or an rgb()/rgba() function string (rgb(59, 130, 246)) — or you can just use the color picker next to each field.
- Is my color data sent to a server?
- No. The contrast calculation runs entirely in your browser with JavaScript — nothing is uploaded or logged.