Cubestack

Color Contrast Checker

Free colour contrast checker — test text and background colours against WCAG 2.1 AA and AAA, see the contrast ratio, and get a suggested colour that passes.

Large heading text

Normal body text for reading. Good contrast helps everyone read comfortably, including people with low vision and anyone using a phone in bright sunlight.

Small print and captions

A button

Contrast ratio

5.00:1

  • Normal text — AA4.5:1
  • Normal text — AAA7:1
  • Large text — AA3:1
  • Large text — AAA4.5:1
  • UI parts & graphics — AA3:1

Large text means at least 24px, or 18.66px bold.

What is the Color Contrast Checker?

Contrast ratio measures how different two colours look in brightness, from 1:1 to 21:1. WCAG accessibility guidelines require at least 4.5:1 for normal text so people with low vision can read it.

How to use it

  1. 1

    Pick the text colour

    And the background.

  2. 2

    Read the ratio

    Green ticks pass.

  3. 3

    Use the suggestion

    If it fails.

Features

  • WCAG 2.1 checks

    AA and AAA for normal and large text, plus UI parts.

  • Live preview

    Headings, body text and a button.

  • Fix suggestion

    A similar colour that passes AA.

Popular uses

  • Website design

    Readable buttons and text.

  • Accessibility audits

    Meet WCAG and legal requirements.

  • Presentations

    Slides readable on projectors.

Frequently asked questions

What ratio do I need?

4.5:1 for normal text and 3:1 for large text (AA).

What counts as large text?

24px or more, or 18.66px bold.

Related tools