JoliTools

Contrast Checker

WCAG contrast ratios for text readability

Suggestion

Excellent contrast. This pairing passes WCAG AAA for normal text.

Large text sample

The quick brown fox jumps over the lazy dog. This is normal body text at a regular size.

Contrast ratio

17.40:1

Normal text, AA

4.5:1 required

✓ Pass

Normal text, AAA

7:1 required

✓ Pass

Large text, AA

3:1 required

✓ Pass

Large text, AAA

4.5:1 required

✓ Pass

Ratios follow the WCAG 2.x formula. Large text means 18pt (24px) or 14pt (18.66px) bold and larger. Everything runs in your browser.

About this tool

Beautiful design means nothing if people cannot read it. This checker computes the exact WCAG contrast ratio for any text/background pair and tells you whether it passes AA and AAA.

Designers use it to validate palettes, developers to check themes. Adjust either color live until every badge turns green.

How to use the contrast checker

  1. 1Pick the text and background colors.
  2. 2See the contrast ratio instantly.
  3. 3Check AA/AAA badges for normal and large text.

Frequently asked questions

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1.

Related tools

More free tools you might find useful.

New

Color Picker

Pick colors and convert HEX, RGB and HSL instantly

Developer Tools
New

Color Converter

Convert colors between HEX, RGB, HSL, and CMYK.

Developer Tools
New

Image Color Picker

Pick any color from an image

Image Tools
New

Regex Tester

Test regular expressions live with highlighted matches

Developer Tools

Part of Developer Tools on JoliTools, free tools, no sign-up.