Check text and background contrast ratio against WCAG in real time

Page Summary

The Contrast Checker validates the contrast ratio between text and background colors against WCAG 2.1 (Web Content Accessibility Guidelines). It instantly reports compliance with AA and AAA levels, helping you design highly readable color combinations and build websites usable by everyone.

  • WCAG compliance: instantly judge AA and AAA levels
  • Real-time updates: the ratio recalculates as you adjust the color picker
  • Accessibility: quantitatively evaluates support for low vision and color vision diversity
  • Use cases: check legibility for buttons, banners, and body copy
ADVERTISEMENT
RGB: 0, 0, 0
RGB: 255, 255, 255
21.00 : 1
Contrast Ratio
Normal Text AA (4.5:1)
✓ Pass
Normal Text AAA (7:1)
✓ Pass
Large Text AA (3:1)
✓ Pass
Large Text AAA (4.5:1)
✓ Pass

Normal text: The quick brown fox jumps over the lazy dog.

Large text: Heading Sample

* Per WCAG, "large text" means 18pt (about 24px) or larger, or bold text 14pt (about 19px) or larger.

ADVERTISEMENT

Frequently Asked Questions (FAQ)

What Is Contrast Ratio and the WCAG Accessibility Standard?

Web accessibility is defined by the international WCAG (Web Content Accessibility Guidelines) standard. The contrast ratio quantifies how readable text is against its background, directly impacting users with visual impairments as well as anyone reading on a phone in bright sunlight.

The Difference Between AA and AAA

WCAG 2.1 defines three conformance levels: A, AA, and AAA. Most websites are recommended to meet "AA," and Japan's JIS X 8341-3 adopts the same target. "AAA" is a stricter benchmark to be met where reasonably possible.

The Definition of Large Text

WCAG applies a more lenient threshold (AA: 3:1) to "large text." Regular text 18pt (about 24px) or larger, or bold text 14pt (about 19px) or larger qualifies. This typically includes headings and large labels.

Practical Limits and What This Tool Cannot Do

WCAG 2.1's contrast calculation is based on relative luminance and does not perfectly reflect human color perception. Combinations of dark colors such as blue on black or navy on dark green may pass the math while remaining hard to read in practice. Readability also depends on font size, weight, anti-aliasing, and background texture, so the contrast ratio alone cannot fully determine accessibility.

Real-World Q&A

Q: AA passes but AAA fails — which should I aim for? — For most websites, AA (4.5:1 or higher) is the minimum baseline. AAA (7:1 or higher) is recommended for sites serving older audiences or public services where broader accessibility matters. Q: Designing contrast for dark mode is difficult — Dark mode typically uses light text on a dark background, but pure white (#FFF) is too harsh. A softer off-white such as #E0E0E0 is a common best practice — verify the resulting contrast with this tool before shipping.

The Evolution of Contrast Standards

WCAG 2.0 (2008) introduced the first numeric contrast requirements, and WCAG 2.1 (2018) added contrast rules (1.4.11) for non-text components. WCAG 3.0, currently in draft, proposes APCA (Advanced Perceptual Contrast Algorithm), which models the relationship between font size, weight, and required contrast more precisely. Japan's JIS X 8341-3 conforms to WCAG, and following the April 2024 amendment to the Act on Eliminating Discrimination Against Persons with Disabilities — which effectively mandates web accessibility for private-sector companies — interest has surged.

ADVERTISEMENT