Contrast Checker

Contrast Checker

Free WCAG contrast checker. Enter a text and background color to get the contrast ratio, AA/AAA results and the nearest passing color.

Text color

Background color

Contrast ratio

–

WCAG 2.2 results

	AA	AAA
Normal text
Large text
UI components and graphics		–

Preview

Normal text (16 px). The quick brown fox jumps over the lazy dog.

Large text (24 px)

Large bold text (18.66 px bold)

Button

Suggestions

Target

Nearest passing text color

–

Nearest passing background color

–

How to use the contrast checker

Enter the Text color and the Background color. Use the color swatches or type any CSS value in the fields: a HEX code such as #595959, rgb(89 89 89), hsl(0 0% 35%) or a name such as navy.
The Contrast ratio updates as you type, from 1:1 (no contrast) to 21:1 (black on white).
The WCAG 2.2 results table shows Pass or Fail for Normal text, Large text and UI components and graphics, at levels AA and AAA.
Check the Preview: it shows normal text, large text, large bold text, a button outline and an icon in your two colors.
If a level fails, choose a Target under Suggestions. The tool proposes the Nearest passing text color and the Nearest passing background color. Click Use to apply one. Swap colors exchanges text and background.

Everything is computed in your browser; nothing is sent anywhere.

How the contrast ratio is calculated

WCAG 2.x defines the ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker one. Relative luminance is computed from linearized sRGB channels: each channel is decoded with the sRGB transfer curve, then L = 0.2126 R + 0.7152 G + 0.0722 B. Green weighs the most because our eyes are most sensitive to it, which is why a pure green looks much brighter than a pure blue of the same “strength”.

The ratio is never rounded up. #777777 on white gives about 4.48:1 and fails AA for normal text, even though it looks like “4.5”. This tool truncates the displayed value to two decimals so what you see is what WCAG checks.

If the text color is semi-transparent (for example rgb(0 0 0 / 60%)), it is first blended over the background, as the browser would draw it. Transparency in the background color is ignored, because what lies behind the page is unknown.

WCAG levels at a glance

Content	AA	AAA
Normal text	4.5:1	7:1
Large text (24 px, or 18.66 px bold)	3:1	4.5:1
UI components and meaningful graphics	3:1	–

“Large text” means at least 18 pt (24 CSS pixels), or 14 pt bold (about 18.66 px). Logos and purely decorative text have no requirement. The 3:1 rule for interface components (success criterion 1.4.11) applies to borders of inputs and buttons, focus indicators, icons and chart lines that users need to see.

How the suggestions work

The suggested colors keep the hue and chroma of your color in the OKLCH space and only change its lightness, darker or lighter, until the target ratio is reached. The tool then picks whichever of the two directions is visually closest to your original color, measured in OKLab. The result is checked again after rounding to a HEX code, so it really passes. If no lightness can reach the target (7:1 against a mid grey, for instance), the tool says so.

About APCA

APCA (Accessible Perceptual Contrast Algorithm) is a newer contrast model considered for a future WCAG 3. It accounts for font weight, size and polarity (dark on light versus light on dark). It is still a draft and not a legal or normative requirement, so this tool reports WCAG 2.x results, which remain the reference for the European accessibility standard EN 301 549, Section 508 and most laws.

Frequently asked questions

What contrast ratio do I need for body text?

At least 4.5:1 for level AA, which is the level most laws and policies require. Aim for 7:1 (AAA) for long reading or for audiences with low vision.

Does white text on my brand color pass?

Enter white as the text color and your brand color as the background. Many mid-tone blues, oranges and greens only reach 3:1: fine for large headings and buttons with large labels, not for small text. Use the suggested background color if you need AA for normal text.

Why does the order of the colors not change the ratio?

The formula always divides the lighter luminance by the darker one, so dark on light and light on dark give the same ratio. The perceived contrast can still differ slightly, which is one of the issues APCA tries to address.

Is 4.49:1 close enough to pass?

No. WCAG thresholds are strict minimums: 4.49:1 fails AA for normal text. Use the suggestion to get a color that actually passes.

Does the contrast checker work for placeholder or disabled text?

Placeholder text must meet the same 4.5:1 minimum when it conveys information. Disabled controls are exempt from contrast requirements, but readable disabled states still help users.