Contrast Ratio Checker

Contrast ratio checker for WCAG AA and AAA

This contrast ratio checker measures how much a text color stands out from its background and tells you whether the pair meets WCAG AA and AAA. Enter two colors, read the ratio from 1:1 to 21:1, and see the result on real interface components. It is free and runs in your browser.

How to check a contrast ratio step by step

1. Type a HEX code into Foreground (text), or click the color swatch to pick a color. The default is #111827.
2. Type a HEX code into Background. The default is #FFFFFF.
3. Read the large ratio at the top of the results. The badges beside it show AAA, AA, AA Large and UI 3:1 as pass or fail.
4. Scan the table of criteria to see which text sizes and components the pair satisfies.
5. Press Swap colors to test the reverse pair, such as light text on a dark fill.
6. Open Compliant Color Suggestions and click any chip to apply it, then check the Live UI Contrast Preview.

You can also start from one of six presets, such as Black on white, White on blue or Gray on gray. They are useful for seeing what a passing and a failing pair look like.

What the contrast ratio checker shows you

• Exact ratio and verdict: a plain-language summary says whether the pair passes AAA, passes AA, works for large text only, or fails.
• Pass and fail badges: AAA, AA, AA Large and UI 3:1 are marked separately, so you see which uses are safe.
• Scale meter: a bar from 1:1 to 21:1 with markers at 3:1, 4.5:1 and 7:1.
• Criteria table: normal text, large text and UI components, each with its level, required ratio and result.
• Live preview: a navigation bar, heading, body text, small text, badges, a link, an input and a button drawn with your pair.
• Quick actions: Copy ratio, Copy report (a pass and fail summary for tickets or handoff) and Share link, which copies a URL that restores your two colors.

WCAG contrast ratio requirements for text and UI

WCAG 2.x asks for at least 4.5:1 for normal text and 3:1 for large text at level AA. Level AAA raises those to 7:1 and 4.5:1. The requirements are the same in WCAG 2.1 and WCAG 2.2.

The W3C explains the text rules in Understanding Success Criterion 1.4.3 and Success Criterion 1.4.6. Borders, icons and focus rings fall under Non-text Contrast.

What counts as large text in WCAG?

Large text is 24px (18pt) or bigger, or 14pt bold (about 18.66px) or bigger. Anything smaller is normal text and needs 4.5:1 at AA. The live preview includes 16px body text and 12px small text so you can see how the same pair feels at different sizes.

How is the color contrast ratio calculated?

The ratio compares the relative luminance of the two colors: (lighter + 0.05) divided by (darker + 0.05). Relative luminance is a weighted sum of the linearized red, green and blue values, defined in WCAG as the relative luminance of a color.

Take gray #767676 on white. Each channel is 118, so the linear value is about 0.181 and the luminance is 0.181. White has a luminance of 1. The ratio is (1 + 0.05) / (0.181 + 0.05), which is about 4.54:1, a pass for AA normal text.

Now try #777777 on white. It looks almost identical, yet the ratio is 4.478:1, so it fails AA. This tool shows 4.47:1 for that pair. The displayed number is rounded down, and pass or fail uses the exact value, so a near miss is never shown as a pass.

Black on white gives the maximum, 21:1. The default pair, #111827 on white, scores 17.73:1.

How to fix a color pair that fails contrast

To fix a failing pair, darken the text, lighten the background, or both, until the ratio reaches the target. The Compliant Color Suggestions panel does this for you. It lists the nearest colors that pass AA and AAA while keeping the original hue.

Each chip shows a sample, the new HEX code, the resulting ratio and a Delta E value. Delta E measures how far the new color moves from your original, so a low number means a subtle change. If plain black or white text passes on your background, the panel offers that too.

For example, white on #059669 green reaches only 3.76:1, which works for large text and UI components but not body copy. A darker green such as #047857 on white reaches 5.48:1 and passes AA. When no same-hue change reaches the next level, the panel says so and you should try a different hue.

Should you aim for AA or AAA contrast?

Aim for AA as the baseline and use AAA where you can, especially for long reading text. AA (4.5:1) is the level most accessibility policies and audits ask for. AAA (7:1) gives more comfort to people with low vision or reading difficulties, and to anyone reading in bright light.

The W3C does not recommend requiring AAA for entire sites, because some content cannot reach it. A practical approach is to meet AAA for body copy, where it is easy, and AA for brand accents, buttons and secondary labels. If the verdict reads "Large text only", the pair is fine for headlines of 24px or more but not for paragraphs.

Who uses a WCAG contrast checker and when

• Designers test text and background pairs before handoff, so a style guide never contains a failing combination.
• Front-end developers confirm that a color token, hover state or disabled style still passes after a theme change.
• Accessibility reviewers use Copy report to attach a clear pass and fail list for AA, AAA, large text and UI components to an issue.
• Marketers and content teams check banners, buttons and email colors, where brand palettes often fall short.
• Students and teams send a Share link so everyone opens the same two colors and sees the same result.

A quick check takes seconds, so run it whenever you pick a new text color, change a background or add a state such as hover, error or disabled. Fixing contrast early is far cheaper than redesigning after an audit.

Color contrast mistakes designers often make

• Judging by eye on a bright screen. A pair that looks fine on a good monitor can fail the ratio. Check the number.
• Ignoring small text. Captions, labels and 12px helper text need the full 4.5:1.
• Using brand colors as text. Mid-tone brand colors often land near 3.7:1, like #EF4444 on white at 3.76:1. Use them for large headings or fills, and a darker shade for body text.
• Skipping UI elements. Input borders, icons and focus indicators need 3:1 against their surroundings.
• Using gray placeholder and disabled text carelessly. The Gray on gray preset, #9CA3AF on #F3F4F6, scores only 2.30:1.
• Forgetting dark mode. Test each theme separately, since a pair that passes in light mode can fail when the colors change.

When a contrast ratio check is not enough

A passing ratio is a minimum standard, not a guarantee of comfortable reading. Font weight, size, spacing and the user's vision all matter. Text over images, gradients or semi-transparent layers also needs separate testing, because this tool compares two solid colors.

For perceptual APCA scores, transparent text or color blindness checks, use the Contrast Checker. To judge reading comfort across sizes and weights, try the Color Legibility Analyzer. You can also simulate color blindness to see whether meaning depends on hue alone.

Need to test a whole palette at once? The palette contrast grid compares every pair, the Palette Accessibility Audit reports problems across a set, and the focus indicator checker covers focus rings. If you only have RGB values, convert RGB to HEX first, then paste the code here. Once you have a pass, build a full set with the Color Safe Palette Builder.