Check the contrast ratio between two colors to ensure WCAG 2.1 accessibility compliance. Test for AA and AAA levels for both normal and large text with real-time preview.
Enter or pick your text/foreground color using the color picker or by typing a HEX value. This is typically your text color.
Enter or pick your background color. Use the swap button to quickly reverse foreground and background if needed.
Check the contrast ratio and WCAG compliance badges. Green badges indicate passing, red indicates failing. Aim for at least AA compliance for all text.
Use the preview section to see how your color combination looks with actual text at different sizes before implementing it in your design.
WCAG (Web Content Accessibility Guidelines) defines contrast requirements to ensure content is readable by people with visual impairments. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively.
Relative luminance measures the perceived brightness of a color using the formula: L = 0.2126R + 0.7152G + 0.0722B. The coefficients reflect human eye sensitivity, with green being most prominent. Values are linearized from sRGB before calculation.
The contrast ratio formula is: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's. The 0.05 offset prevents division by zero and accounts for ambient light.
Large text is defined as 18pt (24px) regular weight or 14pt (18.5px) bold. Large text has lower contrast requirements because its increased size makes it naturally more readable, even with less contrast.
Approximately 8% of men and 0.5% of women have color vision deficiency. Low contrast text is also difficult to read for elderly users, in bright sunlight, or on low-quality displays. Good contrast benefits everyone.
A contrast ratio measures the difference in luminance (brightness) between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability and accessibility.
This is regular paragraph text. Good contrast ensures readability for all users, including those with visual impairments.
This is small text that requires even better contrast for readability.
Contrast Ratio
Click any pair to use it as your foreground/background colors
Saved Presets is a Supporter feature.
Tool History is a Supporter feature.
Tool Notes is a Supporter feature.
