Color Contrast Checker

Check any text-and-background pair against WCAG AA and AAA, preview it through color-blind vision, and get an accessible foreground suggestion, instantly and privately.

A color contrast checker tells you whether text will be readable on its background before you ship it. Enter a foreground and a background color and it gives the WCAG contrast ratio, a pass or fail for AA and AAA, and a color-blind preview, so it doubles as a WCAG contrast checker and an accessibility color tester. When a pair falls short, it suggests a foreground that passes. The check runs privately in your browser.

Vision simulation

Accessibility preview

The quick brown fox jumps over the lazy dog. This helps you judge body text readability.

Contrast ratio

17.74:1

Grade: AAA

Normal text — AA (4.5:1)Pass
Large text — AA (3:1)Pass
Normal text — AAA (7:1)Pass
Large text — AAA (4.5:1)Pass

Large text is ~18.66px bold or ~24px regular and above. Ratios follow WCAG 2.1.

How it works

  1. 1

    Pick two colors

    Set a foreground (text) color and a background color.

  2. 2

    Read the result

    See the contrast ratio and whether it passes WCAG AA and AAA for normal and large text.

  3. 3

    Fix it

    Use the "Suggest better foreground" button, or preview the pair through color-blindness simulations.

Instant & 100% private — nothing is uploaded

Every color is generated and converted right on your own device. Nothing is sent to a server, so there are no waits, no limits, and no copies kept anywhere.

Frequently asked questions

What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal and 4.5:1 for large text. For reference, black on white is 21:1. Large text is roughly 18.66px bold or 24px regular and up.
What does the color-blindness preview show?
It simulates how your color pair looks to people with protanopia, deuteranopia, tritanopia, or full color blindness, so you can spot pairs that collapse into one tone.
How does the "Suggest better foreground" option work?
It finds a text color that clears WCAG AA against your background while staying as close as possible to your intent.
Is my color data sent anywhere?
No. The check runs entirely in your browser. Nothing is uploaded and no colors are stored.

More tools

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.CSS Gradient GeneratorMulti-stop linear & radial gradients with copyable CSS.Color Blender & ConverterMix two colors into steps and convert HEX, RGB, HSL and OKLCH.Color PickerPick a color, read HEX, RGB, HSL, HSV and CMYK, sample any pixel.HEX to RGB ConverterConvert HEX color codes to RGB, plus HSL, HSV and CMYK.RGB to HEX ConverterConvert RGB values to a HEX code with sliders and a live preview.

More from the Hivly network

Free sister tools on our other sites.

Brand Name GeneratorBrandable names from a keyword, with availability, palette and tagline.Bulk Image CompressorBulk-shrink JPG, PNG and WebP — many images at once.JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.