Skip to content
devignity.
All free tools

WCAG color contrast checker

Light grey on white looks elegant and leaves many readers squinting. Check any pair of colours, and fix a failing one without changing its hue.

Text colour
Background colour

Normal text at 16px reads like this, for paragraphs and labels.

Large text at 24px

A button outline

Contrast ratio

5.32:1

  • AA, normal textNeeds 4.5:1 · WCAG 1.4.3Pass
  • AA, large textNeeds 3:1 · WCAG 1.4.3Pass
  • AAA, normal textNeeds 7:1 · WCAG 1.4.6Fail
  • AAA, large textNeeds 4.5:1 · WCAG 1.4.6Pass
  • Buttons, icons, bordersNeeds 3:1 · WCAG 1.4.11Pass

Closest passing text colours, same hue

  • #5959597.00:1, passes AAA for normal text

Large text means at least 24px, or 18.66px when bold. Ratios are rounded down, so a colour shown as passing really passes.

how to use it.

  1. Enter the text colour and the background colour, as hex codes or with the pickers.
  2. Read the contrast ratio and whether it passes WCAG AA and AAA for normal text, large text and interface parts.
  3. If it fails, pick the closest passing colour in the same hue and use it in one click.

what it tells you.

The ratio follows the WCAG 2.2 formula exactly and is rounded down, so a colour shown as passing passes.

Suggestions keep the hue and saturation of your colour and change only its lightness, so the brand still reads as itself.

Accessible design, considered from the first colour. UI/UX design →

questions.

What contrast ratio does WCAG require?

For level AA, normal text needs at least 4.5:1 and large text at least 3:1. For level AAA, normal text needs 7:1 and large text 4.5:1. Interface parts such as button borders and icons need 3:1 under success criterion 1.4.11.

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.66 CSS pixels.

How is the contrast ratio calculated?

Each colour's relative luminance is worked out from its red, green and blue values, then the ratio is (lighter + 0.05) / (darker + 0.05). It runs from 1:1, the same colour twice, to 21:1, black on white.

Is AA enough?

AA is the level most accessibility laws and policies point to, such as the ADA guidance in the US and the European Accessibility Act. AAA is stricter and worth aiming for in long reading text.

What about APCA and WCAG 3?

APCA is a newer contrast method proposed for WCAG 3, which is still a draft. WCAG 2.2 is the standard that laws and audits use today, so this checker follows it.

Does contrast apply to placeholder text and disabled buttons?

Placeholder text that carries information should meet 4.5:1. Disabled controls are exempt under WCAG, though people still need to be able to tell they are there.