Contrast Checker
Verify your color combinations meet WCAG 2.1 accessibility standards for readability.
Hello World!
The quick brown fox jumps over the lazy dog.
12.63
Contrast Ratio
WCAG 2.1 Compliance
What Is Contrast Ratio?
Contrast ratio is a number that measures how different the relative luminance of two colors is. The formula, defined by the WCAG specification, is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 is the darker color's. The result ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast).
Relative luminance is not the same as perceived brightness. It is a linearized measure of the physical light emitted per unit area, accounting for the non-linear response of the human visual system (the gamma curve). This means luminance-based contrast ratios are consistent across different display brightness settings.
WCAG 2.1 Conformance Levels
AA Normal Text: 4.5:1 minimum
The minimum legal threshold for body text in most international accessibility regulations, including EN 301 549 (EU) and the ADA (US). Applies to text below 18pt or 14pt bold.
AA Large Text: 3:1 minimum
Headings, labels, and any text at or above 18pt (24px) regular or 14pt (18.67px) bold. Large text is easier to read, so the threshold is more relaxed. Also applies to UI component borders and focus indicators under WCAG 2.1 1.4.11.
AAA Normal Text: 7:1 minimum
The enhanced level for body text. WCAG does not require all content to meet AAA, but it is strongly recommended for text-heavy interfaces, government portals, and products serving visually impaired users.
AAA Large Text: 4.5:1 minimum
The enhanced level for large text. Aligns with the AA normal text threshold; a good rule of thumb is that large display text should meet the same standard as regular body text to be considered truly accessible.
What Is Exempt from Contrast Requirements?
- Decorative text - text that serves a purely visual or aesthetic purpose, such as a background watermark or artistic logo treatment, is not required to meet contrast ratios.
- Logotypes - text that is part of a brand logo or trademark has no minimum contrast requirement, though best practice is still to maximize it.
- Inactive / disabled UI - components that are visually disabled and cannot be interacted with are exempt, as the low contrast itself communicates their unavailable state.
- Text in images of real scenes - street signs or text captured in a photograph are not subject to digital contrast requirements.
Tips for Passing Accessibility
Darken, Don't Desaturate
Reducing saturation to lighten a color often kills its brand identity. Instead, keep the hue and saturation intact and simply decrease lightness (in HSL or OKLCH) until the contrast target is met.
Test Both Light and Dark Mode
A color pair that passes in light mode may fail when the palette is inverted for dark mode. Always check both. Use this tool with your dark surface color as the background.
Use a Color Scale
Generate a full 50–950 scale (use the Palette tool) and use the 600–700 stops for text on white, and the 100–200 stops for text on dark surfaces. This guarantees contrast without manual tuning.
Don't Rely on Color Alone
WCAG 1.4.1 requires that color not be the only visual means of conveying information. Pair color-coded states (error, success) with icons, labels, or patterns to support colorblind users.