Skip to content
BRAVELY.DEV
My Account

Free tool · Accessibility

Color Contrast Checker

Two colors in, the WCAG contrast ratio out, with AA and AAA results as you type.

Open the full color picker How it works

This checker is free with no sign-in. The full color picker is free with a Bravely account.

  • AA and AAA
  • Normal and large text
  • No sign-in

Contrast ratio

9.22:1

Large text at 24px

Normal text at 16px — the quick brown fox jumps over the lazy dog.

AA normal

4.5:1 needed

Pass

AA large

3:1 needed

Pass

AAA normal

7:1 needed

Pass

AAA large

4.5:1 needed

Pass

Checked with the WCAG 2 relative-luminance formula. Translucent text colors are flattened over the background first, and translucent backgrounds over white, so the ratio matches what actually renders.

The thresholds at a glance

Large text means at least 24px, or about 18.7px bold. Everything smaller counts as normal text.

LevelNormal textLarge text
WCAG AA4.5:13:1
WCAG AAA7:14.5:1

How it works

Check contrast in three steps

  1. 1

    Enter two colors

    Text and background, as HEX, RGB or HSL.

  2. 2

    Read the ratio

    AA and AAA results for normal and large text.

  3. 3

    Adjust and copy

    Tune until it passes, then copy the values.

What you get

Everything included, free

Live WCAG ratio

The contrast ratio recalculates on every keystroke, from 1:1 up to the maximum 21:1 for black on white.

AA and AAA at both sizes

Four verdicts at once: AA and AAA, each for normal text and large text, so you see exactly which uses pass.

Real text preview

Sample text renders in your exact colors at normal and large sizes while you tune them.

One-click swap

Flip foreground and background instantly to test inverted treatments of the same pair.

Translucent colors handled

Text colors with alpha are flattened over the background before checking, matching what actually renders on screen.

Good to know

The WCAG thresholds: 4.5:1, 3:1, and 7:1

Read more

The numbers come from studies of typical vision loss. A ratio of 4.5:1 compensates for the contrast sensitivity lost with moderately low vision or aging eyes, which is why WCAG AA requires it for normal body text. Large text has thicker strokes that stay legible at lower contrast, so its AA threshold relaxes to 3:1, the same figure WCAG 2.1 applies to icons and UI component boundaries. AAA raises normal text to 7:1 for audiences and contexts that need more headroom.

In practice, treat 4.5:1 as the floor for anything people read and 3:1 as the floor for everything else that carries meaning. Passing AA is the widely accepted legal and practical baseline; AAA is worth targeting for long-form reading, small type, or products with older audiences. A pair that fails by a little usually gets there by darkening the darker color slightly rather than redesigning the palette.

Passing contrast without wrecking your palette

Read more

Contrast is mostly a lightness problem, so fix it in HSL. Keep the hue and saturation that make the color yours and move lightness until the ratio clears the threshold: a brand green that fails as text on white will usually pass after dropping lightness ten or fifteen points, and it still reads as the same green. Checking a few candidate steps here takes seconds, and the full color picker can generate those lightness variations for you and export the winners straight to CSS.

Frequently asked questions

What contrast ratio do I need?

For WCAG AA, normal text needs at least 4.5:1 and large text needs at least 3:1. The stricter AAA level asks for 7:1 on normal text and 4.5:1 on large text. Black on white is 21:1, the highest possible ratio.

What counts as large text?

WCAG defines large text as at least 18 point, about 24 CSS pixels, or at least 14 point bold, about 18.7 CSS pixels. Everything smaller is normal text and held to the higher thresholds.

How is the contrast ratio calculated?

Each color is reduced to its relative luminance, a measure of how bright it appears that weights green most and blue least. The ratio is (lighter + 0.05) / (darker + 0.05), which is why it runs from 1:1 for identical colors to 21:1 for black on white. This checker uses the WCAG 2 formula exactly.

Do icons and UI components have a requirement too?

Yes. WCAG 2.1 asks for at least 3:1 between graphical objects or UI component boundaries and their adjacent colors. You can check those pairs here the same way; aim for 3:1 or better.

What if my text color is translucent?

The checker flattens it first. A text color with alpha is composited over the background, and a translucent background is composited over white, so the ratio reflects the colors your users actually see.

Do I need an account?

No. The checker is free for everyone with no sign-in, and every calculation happens in your browser.

More free tools

While you’re here

From the same studio

Bravely Studios builds nine cross-platform desktop utilities: screenshots, PDF signing, remote desktop and more, with one plan that unlocks all of them. Free tools are how we say hello.