Color contrast checker and brand palette export

How to check the contrast of two colors in four steps

1. Enter your two colors. Type a text color and a background color as hex codes such as #1A1A1A, as rgb() or hsl() values, or as a color name such as navy. Transparency works too. You can also use the color pickers, pick a color from a logo or photo, or, in Chrome or Edge on a desktop computer, press the eyedropper button and click any color on your screen.
2. Read the ratio and the four checks. The ratio appears with two decimals, from 1 to 21. Below it are four checks: 4.5:1 for normal text, 3:1 for large text and interface parts, 7:1 for enhanced normal text and 4.5:1 for enhanced large text. The live preview shows your pair at normal and large size.
3. Fix a pair that falls short. When a target is not reached, the tool suggests the nearest color with the same hue, only lighter or darker, that does reach it. You can change the text or the background. Press Use this color to try it, or Swap to flip the pair.
4. Check a whole palette. Building a brand? Switch to Palette mode, add 3 to 12 colors and read the matrix of every pair. Then export the colors as CSS variables, a Tailwind block or JSON, or download a PNG swatch card.

What a contrast ratio is

A contrast ratio is one number that says how different two colors are in brightness. It runs from 1:1, two identical colors, up to 21:1, pure black on pure white. The higher the number, the easier it is to read text in one color on the other.

The tool uses the formula from the W3C's Web Content Accessibility Guidelines (WCAG) 2. Each red, green and blue channel is first converted from its screen value to a linear value. The relative luminance is then 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue. The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. Green counts most because our eyes are most sensitive to it.

Only solid colors are supported. Transparency changes the final color depending on what sits behind it, so flatten it to a solid color first.

The numbers that matter: 4.5, 3 and 7

WCAG 2 uses a few fixed targets. The tool shows all four so you can see where a pair stands.

• 4.5:1 for normal text (success criterion 1.4.3, Contrast Minimum). This is the common target for body copy, labels and links.
• 3:1 for large text, and for interface parts such as button borders, form field outlines and icons (1.4.3 and 1.4.11, Non-text Contrast).
• 7:1 for normal text at the enhanced level (1.4.6, Contrast Enhanced).
• 4.5:1 for large text at the enhanced level (also 1.4.6).

Large text means at least 24 CSS pixels, or at least 18.66 pixels (14 points) and bold. Anything smaller counts as normal text. Logos, purely decorative text and disabled controls are exempt from the text rule.

The ratio is cut, never rounded up. A pair at 4.497 shows as 4.49 and falls short, so 4.50 on screen always means at least 4.5.

How to fix a pair that falls short

Most failing pairs are one small step from reaching the target. When a check is not reached, the tool looks for the nearest color that reaches it, keeping the hue and changing only the lightness. It can adjust the text or the background, and you choose which.

Some situations come up again and again.

Choosing a brand palette that works

Palette mode takes 3 to 12 colors, with optional names, and shows the ratio for every pair in a matrix. That turns a vague feeling about your brand colors into a clear list.

Read the matrix in three groups. Pairs at 4.5:1 or more are safe for body text. Pairs between 3:1 and 4.5:1 suit large headings, buttons, borders and icons. Pairs under 3:1 are for decoration only, such as backgrounds, dividers and shapes.

A typical result: a deep navy and an off-white reach well over 7:1, so they carry the text. A mid-tone orange accent might reach 3:1 on the navy, so it works for a button outline but not for small copy. A pale yellow on white at about 1.1:1 is only a background tint. Decide these roles before you design, and you will not need to patch colors later.

What a ratio does not tell you

A ratio is one check among many. A site can reach every number here and still be hard to use, and a good ratio does not make a site legally safe. This is not legal advice. If a law or contract applies to your site, ask a qualified professional.

• It ignores font weight and thinness. A very thin typeface can be hard to read at 4.5:1.
• It cannot judge text over photos, gradients or patterns.
• It does not cover meaning carried by color alone, such as red for errors with no icon or words.
• It says nothing about focus outlines, keyboard use, screen readers, captions or clear wording.
• Color blindness is helped by contrast, but contrast does not replace having a second cue besides color.

Some people prefer a newer perceptual method called APCA, proposed for WCAG 3. It is not final. This tool uses the current WCAG 2 formula, the one most tests and audits use today.

Using the exports

Once a palette looks right, Palette mode exports it in the format your project needs. Each is shown as text to copy, and nothing is saved.

Your colors stay in your browser

The maths, the preview and the exports all run in your browser. Your colors are not uploaded, stored or logged, and you need no account. Close the tab and they are gone, so copy any export you want to keep.

Frequently asked questions