Color Contrast Checker
Check text and background color contrast against WCAG 2.1 AA and AAA — instantly see the contrast ratio with a live preview and pass/fail badges.
Colors
4.48:1Higher is better. WCAG requires at least 4.5:1 for normal text.Aa normal text — the quick brown fox
Aa large text
About this tool
This color contrast checker measures how readable text is against its background using the WCAG 2.1 contrast formula. Enter a text color and a background color as HEX values, or pick them visually, and it instantly shows the contrast ratio (for example 4.52:1) together with pass or fail badges for the Web Content Accessibility Guidelines AA and AAA levels. A live preview renders sample text in your chosen colors so you can judge the result at a glance, and a swap button flips foreground and background. Everything runs in your browser, so it is fast, private and works offline once loaded — ideal for designers, developers and anyone building accessible interfaces.
How to use
- 1 Enter your text (foreground) color as a HEX value or pick it with the color picker.
- 2 Enter the background color the same way; #rgb and #rrggbb shorthands both work.
- 3 Read the contrast ratio and the AA / AAA pass-fail badges for normal and large text.
- 4 Use the swap button to flip the colors, and adjust until you reach at least 4.5:1.
How it works
Each color is first converted from sRGB to linear light: every channel is divided by 255, and values above 0.03928 are raised to a gamma curve. The relative luminance is then L = 0.2126·R + 0.7152·G + 0.0722·B, weighting green most because the eye is most sensitive to it. The contrast ratio between two colors is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker one. This gives a value from 1:1 (identical colors) up to 21:1 (pure black on pure white). WCAG 2.1 requires a ratio of at least 4.5:1 for normal text and 3:1 for large text at the AA level, rising to 7:1 and 4.5:1 for AAA. Large text means roughly 18.66px bold or 24px regular and above.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
For WCAG 2.1 Level AA you need at least 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Most websites aim for AA as the legal and practical baseline.
What counts as large text?
WCAG defines large text as at least 18.66px (about 14pt) and bold, or at least 24px (about 18pt) at any weight. Large text is easier to read, so it is allowed a lower contrast threshold (3:1 for AA, 4.5:1 for AAA).
How is the contrast ratio calculated?
Each color's relative luminance is computed from its linearized red, green and blue channels (L = 0.2126R + 0.7152G + 0.0722B). The ratio is then (lighter + 0.05) / (darker + 0.05), giving values from 1:1 up to 21:1 for black on white.
Why is pure black on white 21:1?
Black has a relative luminance of 0 and white has 1. Plugging these into (1 + 0.05) / (0 + 0.05) gives 21, the maximum possible contrast ratio. That is why #000000 on #ffffff passes every WCAG level.
Does color contrast affect SEO and accessibility law?
Yes. Sufficient contrast is part of accessibility standards referenced by laws such as the ADA, Section 508 and the European Accessibility Act, and good readability improves usability metrics. Meeting WCAG AA reduces legal risk and makes your content usable for people with low vision or color deficiencies.
Related tools and uses
A contrast checker is essential for accessible web and app design. Pair it with the color converter to translate between HEX, RGB and HSL while you tune your palette, and the percentage calculator when scaling spacing or opacity. Designers, front-end developers and content creators use it to ensure buttons, labels and body text remain readable for everyone.