WCAG Color Contrast Checker
Check the contrast ratio between two colors and see if they pass WCAG AA and AAA for normal and large text.
Large text preview
Normal body text preview for this color pair.
Runs entirely in your browser. Your colors are never uploaded anywhere.
How to use this tool
Pick a foreground (text) color and a background color using the color squares, or type a hex value such as #1a73e8 into either box. Press Check contrast and the tool shows the exact contrast ratio along with AA and AAA pass or fail results for normal and large text. The live preview above the results shows how the pair actually reads. Use Swap colors to flip text and background, and Copy result to grab a one-line summary for your design notes or accessibility audit.
How the contrast ratio is calculated
(each channel is linearized first)
contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05)
This is the official WCAG 2.1 formula. Each red, green, and blue channel is first divided by 255, then linearized: if the value is below 0.03928 it is divided by 12.92, otherwise it is raised through ((value + 0.055) / 1.055) to the power of 2.4. The three linear channels are combined into a single relative luminance, and the two luminances are compared. The result ranges from 1:1 (no contrast, identical colors) up to 21:1 (pure black on pure white). For the foreground background ratio to pass ADA-aligned accessibility checks, WCAG asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at level AAA. Large text means roughly 18.66px bold or 24px regular and up.
A real example
Take dark gray text #595959 on a white background #ffffff. White has a relative luminance of 1.0, and #595959 works out to about 0.10. The contrast ratio is (1.0 + 0.05) / (0.10 + 0.05), which is about 7.0:1. That clears AA for both text sizes and just reaches AAA for normal text, so it is a safe, readable choice. Lighten the text to #999999 and the ratio drops to roughly 2.85:1, which fails every check and should not be used for body copy.
Common questions
What is a good WCAG contrast ratio?
For normal body text, aim for at least 4.5:1 to meet WCAG AA, the level most ADA compliance tests target. Level AAA wants 7:1. Large or bold text can pass at 3:1 (AA) or 4.5:1 (AAA). Higher is always safer for readability.
What counts as large text?
WCAG defines large text as at least 18.66px (14pt) when bold, or 24px (18pt) at normal weight. Large text has a lower contrast requirement because bigger letterforms are easier to read at the same ratio.
Does passing this checker mean my site is ADA compliant?
Color contrast is one important part of accessibility, but full ADA and WCAG conformance also covers keyboard access, alt text, focus order, and more. This text contrast tool helps you pass the color portion; it is not a complete compliance audit.
Can I enter colors other than hex?
The boxes accept 6-digit and 3-digit hex like #1a73e8 or #abc. The color squares always work too. For other formats, convert them to hex first, then paste the value in.
Why do my colors look slightly different on another screen?
The ratio math is exact and device independent, but how a color appears depends on the monitor, brightness, and color profile. The calculated contrast ratio stays the same everywhere even if the visual look varies.