Clarity: Color Contrast Check

For designers, developers, and accessibility advocates

Know whether your color pair meets WCAG contrast targets.

Choose text and background colors. See the ratio, AA and AAA results, and suggestions for better contrast.

Get it for iPhone & iPad Get it for Mac

Free to try. A one-time lifetime purchase to unlock all features.

Available for iPhone, iPad, and Mac.

Clarity's color pair editor showing a 3.56:1 ratio for Black Coral on Yellow Cine. AA large text passes. AA normal text and AAA checks fail.
Black Coral on Yellow Cine reads 3.56:1. It meets AA for large text, but not AA for normal text or AAA.

“Does exactly that it needs to do. Responsive Dev. Must-have for web building, and making sure sites are accessible. Recommended.”

Wacko_66·macOS App Store

The problem

A color can look right and still be hard to read.

It is hard to judge contrast by eye. Check the text and background colors before you use them in an interface.

Clarity gives you a ratio and a result for each WCAG contrast target. If a pair falls short, review color suggestions and choose one to apply.

What Clarity checks

One pair. A ratio and clear AA and AAA results.

Clarity checks foreground and background colors with the WCAG 2.0 relative-luminance contrast formula.

It compares the relative luminance of the lighter and darker colors with this formula: (L1 + 0.05) / (L2 + 0.05). L1 is the lighter color's relative luminance. L2 is the darker color's.

  • 3:1 for AA large text
  • 4.5:1 for AA normal text and AAA large text
  • 7:1 for AAA normal text

The live ratio ranges from 1:1 to 21:1. Results update as you change either color.

An example finding

See what fails, then choose a color that meets your target.

This pair starts at 1.09:1. Clarity marks every displayed ratio as a fail.

Before

Granite Gray on Black Coral

The pair reads 1.09:1. It misses 3:1, 4.5:1, and 7:1.

The editor shows Granite Gray on Black Coral at 1.09:1. The 3.0, 4.5, and 7.0 contrast checks all fail.
Granite Gray text on a Black Coral background.

Suggested alternative

Gainsboro on Black Coral

This suggestion meets 4.5:1 for AA normal text. It does not meet 7:1 for AAA normal text.

Clarity's color suggestions show Gainsboro on Black Coral passing the 3.0 and 4.5 contrast checks, but not 7.0.
Choose a suggested color, then check its result.

“Simple but super practical app that’s been a big help while designing interfaces for an upcoming website I’m developing. It instantly shows whether your color choices meet accessibility standards, making it easy to keep everything readable for everyone. Definitely a must-have for designers.”

-Top_Ti3r-·macOS App Store

The workflow

Pick two colors. Check them. Decide what to change.

  1. 01 · Choose

    Set the foreground and background

    Adjust colors with RGB, HSL, HCT, LCH, or LAB controls. On Mac, sample a color from your screen.

  2. 02 · Check

    Read the ratio and verdicts

    See how the pair measures against AA and AAA contrast ratios as you edit.

  3. 03 · Refine

    Preview and keep the pair

    Try a suggestion, check text readability and color-vision simulations, then save or export the pair.

Try it

Try a color pair.

Pick a text color and a background. See the real contrast ratio and AA and AAA verdicts.

01 · Text color

02 · Background

03 · Verdict

Near-black on Yellow passes AA and AAA.

  • 3:1 for AA large text — Pass
  • 4.5:1 for AA normal text and AAA large text — Pass
  • 7:1 for AAA normal text — Pass

Readable starts here

The quick brown fox jumps over the lazy dog.

Try sample pairs here — in the app you can check any colors you pick.

Check your own colors

Get it for iPhone & iPad Get it for Mac

Free to try. A one-time lifetime purchase to unlock all features.

More ways to review a pair

Check how colors work in context.

Preview text and UI

Check headings, body text, and button text against the pair. Compare the colors with a lightness preview, too.

Clarity's Readability Preview showing heading, paragraph, and button text in the selected colors and in a lightness view.
Preview sample text in both the selected colors and a lightness view.

Review color-vision simulations

See the pair across eight color-vision simulations. Clarity shows a contrast check for each one.

Clarity shows eight color-vision simulations, each with its own contrast results.
Each simulation includes its own contrast results.

Reuse color pairs

Import palettes from text, files, or images. Export colors as text, files, or images.

Clarity's Color Library showing saved color pairs, their color samples, and contrast results.
Save pairs in the Library and return to their contrast results.

Recents keeps up to 20 pairs automatically. The Library holds pairs you choose to save.

Before you download

FAQs

Is Clarity free?

Yes. Clarity is free to download and try. A one-time lifetime purchase unlocks all features.

Which contrast standard does Clarity use?

Clarity uses the WCAG 2.0 relative-luminance contrast ratio and shows AA and AAA results.

Does Clarity change colors for me?

Clarity suggests alternative colors. You choose which one to apply.

Which devices can I use?

Clarity is available for iPhone, iPad, and Mac.

Check your next color pair

Make your next contrast decision with a ratio in front of you.

Get Clarity for iPhone, iPad, and Mac.

Get it for iPhone & iPad Get it for Mac

Free to try. A one-time lifetime purchase to unlock all features.

More apps

You might also like

Explore all apps