Color Contrast Checker

How to Check Color Contrast

Enter the foreground color used for text, icons, borders, or another meaningful visual, then enter the adjacent background color. The results update immediately using the WCAG 2.2 relative-luminance formula. Review the relevant AA or AAA result instead of treating one threshold as suitable for every design element.

1. 1. Add both colors

   Type a three- or six-digit HEX value, or use the browser color controls.

2. 2. Choose the use case

   Check normal text, large text, or meaningful non-text UI and graphics.

3. 3. Preview and improve

   Inspect the live examples, try a suggested foreground, then copy or export the report.

WCAG 2.2 Contrast Thresholds

A contrast ratio ranges from 1:1 for identical luminance to 21:1 for black against white. WCAG treats the stated values as thresholds, so a ratio below a requirement fails even when a rounded display appears equal to it. This checker evaluates the unrounded result and rounds only the value presented on screen.

Normal Text, Large Text, and UI Indicators

Large text receives a lower contrast threshold because thicker, larger letter shapes are easier to perceive. The common CSS approximations are 24 pixels for regular text or about 18.66 pixels for bold text. A large container does not make the text inside it large; the rendered font size and weight determine the classification.

The 3:1 non-text requirement applies to visual information needed to identify a control or its state and to parts of graphics required for understanding. It does not mean that every decorative border or icon on a page must meet 3:1. Test each meaningful object against the color directly adjacent to it.

Gradients, Images, Transparency, and Real Rendering

A two-color checker is exact only for two opaque sRGB colors. For transparent layers, calculate or sample the final composited color. For text over an image or gradient, check the least-contrasting pixels behind the complete text area rather than a convenient average. Anti-aliasing can make thin type appear lighter than its declared CSS value, so designs close to a threshold benefit from a safety margin.

Passing contrast is one accessibility requirement, not a complete conformance result. Also review focus visibility, keyboard operation, semantics, labels, error handling, zoom, responsive layout, motion, and whether color is the only signal communicating information.

How the WCAG Contrast Ratio Is Calculated

Each eight-bit sRGB channel is normalized and converted to linear light using the 0.04045 breakpoint. Relative luminance is then calculated as 0.2126 × red + 0.7152 × green + 0.0722 × blue. The final ratio is (lighter luminance + 0.05) ÷ (darker luminance + 0.05).

Review the official W3C guidance for text contrast minimums and non-text contrast. External references open in a new tab.

Private, Browser-Based Checking

HEX parsing, luminance calculation, WCAG evaluation, foreground suggestions, copying, and text-report creation run locally in your browser. The colors you enter do not need to be uploaded to perform the check.

Continue Your Image & Design Workflow

Extract exact colors or build a palette with the Color Picker & Image Palette Extractor, prepare scalable icons with the SVG Converter, optimize artwork using the Image Compressor, or verify body copy with the Readability Score Checker.

Color Contrast Checker FAQs