WCAG Color Contrast Checker

How the Color Contrast Checker Works

This tool evaluates color accessibility using the WCAG 2.2 algorithm:

1. Enter two colors, use the color picker or type hex codes for your foreground (text) and background colors. The tool updates in real time as you adjust.
2. Contrast ratio calculation, the tool calculates the relative luminance of both colors and computes the contrast ratio using the WCAG formula: (L1 + 0.05) / (L2 + 0.05).
3. WCAG compliance check, the ratio is tested against five criteria: AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), AAA Large (4.5:1), and UI Components (3:1).
4. Live preview, see your colors in action with sample text at different sizes (normal, large, bold, small) to visually confirm readability.
5. Auto-suggestion, if your colors fail any WCAG level, the tool suggests the closest accessible foreground color by adjusting lightness while preserving hue and saturation.

Why Color Contrast Matters for Web Accessibility

Color contrast is one of the most fundamental, and most commonly violated, web accessibility requirements:

• 1 in 12 men are color blind, approximately 8% of males and 0.5% of females have some form of color vision deficiency. Low contrast makes your content unreadable for millions of potential visitors.
• Accessibility requirements, a passing color pair addresses a contrast criterion, not a whole-site audit or legal compliance. Requirements depend on jurisdiction and service; see the European Accessibility Act scope.
• Mobile and outdoor readability, even users with perfect vision struggle with low-contrast text on mobile devices in bright sunlight. Good contrast benefits all users in all conditions.
• Usability and QA, automated tools such as Lighthouse can flag some contrast failures. Contrast is separate from Core Web Vitals, and a passing color pair alone does not establish accessibility conformance.
• Brand trust and professionalism, accessible design signals that you care about all users. It builds trust, reduces bounce rates, and improves overall user experience metrics.

Use our Website Accessibility Checker to screen additional server-rendered markup patterns. It is not a browser, keyboard, screen-reader, or conformance audit. Also check what fonts your site loads, because text size and weight affect which contrast threshold applies, and review the page at mobile sizes and in realistic lighting.

WCAG 2.2 Contrast Requirements at a Glance

Quick reference for the contrast ratios you need to hit:

AA is the legal baseline in most jurisdictions and what most sites should target for every text element. AAA (7:1 normal text) is recommended for critical content like legal, medical, or government information.

For comprehensive web design that meets accessibility standards from the ground up, explore our web design services and SEO services.

Contrast Ratio Formula

WCAG 2.x defines the contrast ratio through relative luminance: the brightness of a color on a scale from 0 for black to 1 for white. The checker calculates it in three steps.

1. Linearize each channel. Divide the red, green and blue values by 255. A value of 0.04045 or less is divided by 12.92; a higher value becomes ((value + 0.055) / 1.055) raised to the power 2.4.
2. Weight the channels. Relative luminance L = 0.2126 × R + 0.7152 × G + 0.0722 × B, using the linear values.
3. Compare the two colors. Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one's.

Worked example: #767676 text on white. Each channel is 118, and 118 / 255 = 0.4627. Linearized, that is ((0.4627 + 0.055) / 1.055)^2.4 = 0.1812. The three channels are equal, so L = 0.1812. White has L = 1, so the ratio is (1 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312 = 4.54:1.

That passes AA for normal text with little room to spare. One step lighter, #777777, gives 4.48:1 and fails.