Puffinmint
EN
Italiano English Español Français Deutsch Português (Brasil) 日本語 한국어 Polski Türkçe

Color contrast checker for WCAG

Compare foreground and background colors. Calculate their contrast ratio and check WCAG AA and AAA thresholds for normal and large text.

Processed in your browser: your data are not uploaded.

Set your data

Set your data

Choose opaque text and background colours. Ratio uses sRGB relative luminance and compares AA and AAA thresholds for normal and large text.

Result

Your result will appear here.

We count which tools are used most, without including entered values or file contents in the statistics. Privacy

How to use the tool

  1. Choose opaque text and background colours.
  2. Ratio uses sRGB relative luminance and compares AA and AAA thresholds for normal and large text.

Method and principles

Opaque sRGB colours; large text is at least 18 pt or 14 pt bold.

WCAG 2.2 text contrast only.

Practical example

Input
  • Text colour: #000000
  • Background colour: #ffffff
Result
21:1 AA normal text: Pass AA large text: Pass AAA normal text: Pass AAA large text: Pass

Sources and further reading

PRACTICAL GUIDES

Check text contrast without rounding away a failure

Colors that look different can still produce hard-to-read text. Measure the actual foreground-background pair, then consider text size, background conditions and interface states.

Follow the steps

You might also need

View all

Favicon generator

Create favicons from an image, text or emoji. Preview and download several PNG sizes and an ICO file, with image processing in your browser.

Color palette generator

Generate analogous, complementary, triadic and monochromatic color palettes. Copy HEX codes and download the palette as CSS variables.

CSS gradient generator

Create linear and radial CSS gradients with two colors, a custom angle and a preview. Copy the code or download a CSS file.

Favorites