Technology

Color Contrast Checker

Check the contrast ratio between two colors and see instant WCAG 2.1 AA and AAA pass or fail results for normal and large text. Enter any hex colors.

Color Contrast Checker

Foreground (text) color

Background color

Method

How this calculator works

For each 8-bit channel: s = v/255; linear = s ≤ 0.03928 ? s/12.92 : ((s+0.055)/1.055)^2.4. Luminance L = 0.2126·R + 0.7152·G + 0.0722·B. Contrast ratio = (L_light + 0.05) ÷ (L_dark + 0.05).

Pick or type a foreground (text) color as a hex value.
Pick or type a background color as a hex value.
The tool converts each color to its WCAG relative luminance.
It divides the lighter luminance plus 0.05 by the darker luminance plus 0.05 and checks the result against every WCAG threshold.

Examples

Worked examples

Real numbers, end-to-end results.

#595959 text on #FFFFFF background

≈ 7.0:1 — passes AA and AAA normal text

A mid grey on white is a common accessible body-text combination.

#777777 text on #FFFFFF background

≈ 4.48:1 — fails AA normal, passes AA large

Just below the 4.5:1 threshold, so it should only be used for large headings.

Use cases

When to use it

Verifying body text meets WCAG AA before shipping a design.
Choosing accessible link and button colors for a brand palette.
Auditing an existing site for low-contrast text.
Deciding whether a color pair needs a darker or lighter adjustment.

FAQ

Frequently asked questions

What is a color contrast ratio?

It is a number from 1:1 to 21:1 that describes how different two colors are in brightness. Pure white on pure black gives the maximum 21:1, while two identical colors give 1:1. Higher ratios mean text is easier to read, especially for people with low vision.

What are the WCAG contrast requirements?

WCAG 2.1 sets minimum ratios: for AA, normal text needs at least 4.5:1 and large text at least 3:1. For the stricter AAA level, normal text needs 7:1 and large text 4.5:1. 'Large' means 18pt (24px) regular or 14pt (18.66px) bold and above.

How is the contrast ratio calculated?

Each color is converted to a relative luminance value using the WCAG formula, which linearises the sRGB channels and weights them 0.2126 red, 0.7152 green, and 0.0722 blue. The ratio is then (L_lighter + 0.05) ÷ (L_darker + 0.05).

What is the difference between AA and AAA?

AA is the widely adopted baseline required by most accessibility laws and standards. AAA is an enhanced level that offers the best readability for users with significant visual impairments. Meeting AAA everywhere is not always practical, so AA is the common legal target.

Does contrast apply to non-text elements too?

Yes. WCAG 2.1 added a 3:1 minimum contrast requirement for meaningful graphical objects and user-interface components such as button borders, form field outlines, and icons, so that they remain perceivable to low-vision users.