Color Contrast Checker

Check whether text is readable on its background

Color Contrast Checker compares a text colour with a background colour and gives the contrast ratio defined in WCAG 2.x, the accessibility guidelines most laws and design systems refer to. It then tells you, in words as well as colour, which of the five common requirements the pair passes: normal text at AA and AAA, large text at AA and AAA, and user-interface components and graphics at AA.

When normal text fails, the tool suggests the nearest text colour that would pass — same hue, only lighter or darker — so you can fix a design without starting over. Everything is calculated in your browser; the colours you enter aren’t sent anywhere.

How to test a colour pair

1. Type the text colour in the first field as #RGB, #RRGGBB, rgb(r, g, b) or hsl(h, s%, l%), or click the swatch beside it to use your system colour picker.
2. Enter the background colour the same way. The ratio and the pass/fail list update as you type.
3. Look at the preview, which shows normal, large and large bold text in your two colours.
4. If normal text fails, pick one of the suggested colours and click Use this colour to apply it.
5. Use Swap colours to check the reverse pairing, for example light text on a dark button.

Reading the ratio and the five checks

• The ratio: runs from 1:1 (identical colours) to 21:1 (black on white). It is rounded down to two decimals, so 4.499 shows as 4.49:1 and never looks like a pass.
• Normal text AA (4.5:1) and AAA (7:1): body copy, labels and anything smaller than large text.
• Large text AA (3:1) and AAA (4.5:1): text at least 24px regular, or about 18.66px (14pt) bold.
• UI components & graphics AA (3:1): borders of inputs and buttons, focus indicators, icons and chart lines that people need to see (WCAG 1.4.11).
• Suggestions: one colour that reaches 4.5:1 and one that reaches 7:1. If no shade of your hue can reach a level on that background, the tool says so — change the background instead.

When a contrast check helps

• Choosing brand colours for text: find out early whether a brand colour works for body text or only for headings and buttons.
• Reviewing a design before handoff: check grey placeholder text, links and disabled-looking labels against their backgrounds.
• Dark mode: swap the colours or enter your dark palette to make sure the inverted pairs still pass.
• Fixing an audit finding: paste the failing pair from an accessibility report and take the nearest passing colour.

Tips for colours that pass

• Aim for AA on everything people need to read; AAA is worth reaching for long passages of body text.
• Check every state: hover, focus, visited links and error text often use lighter colours than the default.
• Text over images or gradients needs testing against the lightest and darkest parts behind it. This tool compares two solid colours, so transparent colours aren’t accepted.
• To build a full set of shades around a passing colour, try the Color Palette Generator; to grab a colour from an image or your screen, use the Color Picker.

How the contrast ratio is calculated

WCAG 2.x relative luminance

Each colour is converted to its relative luminance — how bright it looks, with green weighted most and blue least — and the ratio is (lighter + 0.05) ÷ (darker + 0.05). This is the method WCAG 2.0, 2.1 and 2.2 use. It isn’t APCA, the newer model proposed for a future WCAG 3, which gives different numbers and isn’t a requirement today.

How the suggested colours are found

The text colour is converted to OKLCH, a colour space where lightness steps look even. Only the lightness is moved, darker and lighter, until the ratio reaches the target, and the closest passing colour wins. Hue and chroma stay the same unless the colour wouldn’t exist on screen at that lightness; then chroma is reduced just enough to fit.

Color Contrast Checker: common questions