NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
Aspect ratioColoursContrastCSSCSS unitsPalette

Colour Contrast Checker

WCAG contrast between two colours.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

0:1Contrast ratio
UseNeedsResult

Large text, 24px or 18.66px bold

Normal text at 16px. The quick brown fox jumps over the lazy dog, and this sentence is long enough to read as a paragraph.

Button border Icon

Nearest passing colours

Same hue, lightness moved only as far as needed. Click Use to apply one.

Ratios follow the WCAG 2.2 formula for relative luminance. A see-through text colour is blended onto the background first, as a browser would show it. Large text means at least 24px, or 18.66px when bold.

How to use it

  1. Enter the text colour and the background colour, by typing a value or using the pickers.
  2. Read the contrast ratio and whether it passes AA and AAA for normal text, large text and interface parts such as buttons and icons.
  3. If it fails, use one of the suggested colours: each keeps the hue and changes lightness just enough to pass.

Questions

What contrast ratio do I need?

WCAG level AA asks for 4.5:1 for normal text and 3:1 for large text and for interface parts such as input borders and icons. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

Text of at least 24 CSS pixels, or at least 18.66 pixels when it is bold. That is roughly 18 point regular or 14 point bold.

Why does #777 on white fail when it looks readable?

Its ratio is 4.48:1, just under the 4.5:1 minimum. The limits are set so text stays readable for people with low vision or on a dim screen in sunlight, not just on a good monitor. A slightly darker grey such as #767676 passes.

Does the tool check WCAG 3 or APCA?

No. It uses the WCAG 2.2 ratio, which is what accessibility laws and audits refer to today. APCA is a proposed method for a future version and gives different numbers.

About this tool

Why check colour contrast?

Text that is too close in brightness to its background is hard to read for people with low vision, on a dim screen or in bright sunlight. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios, and accessibility audits and many accessibility laws refer to them.

What the checker shows

  • The contrast ratio between your text and background colours, from 1:1 to 21:1.
  • Pass or fail for level AA and AAA, for normal text, large text and interface parts such as buttons, input borders and icons.
  • Suggested colours when a pair fails: each keeps the hue and changes lightness just enough to pass.

The thresholds

AA needs 4.5:1 for normal text and 3:1 for large text and interface parts. AAA needs 7:1 for normal text and 4.5:1 for large text. Large means at least 24 CSS pixels, or 18.66 pixels when bold.

A familiar near miss

Mid grey #777 on white looks fine on a good monitor but scores 4.48:1, just under AA. #767676 is the lightest grey that passes on white.

Ratios use the WCAG 2.2 formula. A see-through text colour is blended onto the background first, as a browser would show it. APCA, proposed for a future version, gives different numbers and is not used here. Everything runs in your browser.

Related tools