Skip to content
ToolsNest

Check colour contrast for accessibility

Pick a text and background colour to see the contrast ratio and whether it passes WCAG 2 guidelines for normal and large text.

Large heading

Normal body text sample.

Contrast ratio
15.30 : 1
  • AA normal text (4.5:1)Pass
  • AA large text (3:1)Pass
  • AAA normal text (7:1)Pass
  • AAA large text (4.5:1)Pass

Your text is processed in your browser as you type. It is not sent to ToolsNest servers or stored after you leave the page.

How to use the Color Contrast Checker

  1. 1Pick or type the text colour.
  2. 2Pick or type the background colour.
  3. 3Read the ratio and pass/fail results.

Supported formats and limits

  • Uses the WCAG 2 relative luminance formula.
  • Large text means at least 24px regular or 18.7px bold.
  • Accepts 3- or 6-digit hex colours.

Common uses

  • Checking a brand palette.
  • Fixing low-contrast buttons.
  • Accessibility reviews.

Frequently asked questions

Does passing guarantee accessibility?

No. Contrast is one requirement among many, but it is one of the most common failures.

Related tools

Color Converter

Convert colours between HEX, RGB and HSL with a live preview.

Open tool

CSS Gradient Generator

Build linear or radial gradients with live preview and copy the CSS.

Open tool

CSS Box Shadow Generator

Design box shadows with sliders and copy the CSS.

Open tool