Contrast And Ramp Checker

What A Contrast Ratio Measures

A contrast ratio compares how much light two colours reflect. It runs from 1:1, where the colours are identical, to 21:1, which is black on white. The Web Content Accessibility Guidelines (WCAG) use it to set a floor for readable text and visible interface parts, because low contrast is the barrier that affects the most people: anyone with low vision, anyone over forty, and anyone reading a phone in daylight.

Most contrast checkers test one pair at a time. That is fine for a single button, but a brand palette is a ramp of ten or eleven tints and shades, and it has to work on a light page and a dark one. This tool tests the whole ramp in one pass and tells you what each step is allowed to do.

How The Tool Calculates Contrast

It uses the WCAG 2.x formula exactly as published:

1. Linearise each channel. Each red, green and blue value is divided by 255. Values at or below 0.04045 are divided by 12.92; the rest become ((c + 0.055) / 1.055) ^ 2.4. (Older copies of WCAG print 0.03928 as the cut off. At 8 bit colour the two never produce a different result.)
2. Weight the channels. Relative luminance is 0.2126 R + 0.7152 G + 0.0722 B, because the eye is far more sensitive to green than to blue.
3. Compare. The ratio is (L1 + 0.05) / (L2 + 0.05), with the lighter colour as L1.

Ratios are truncated to two decimals, never rounded up. A pair at 4.49:1 fails the 4.5:1 test, and the tool shows it as failing.

The Thresholds It Tests

• 4.5:1 for normal text at Level AA (Success Criterion 1.4.3, Contrast Minimum).
• 3:1 for large text at Level AA. Large means at least 18 point (24px) regular, or 14 point (about 18.66px) bold.
• 3:1 for user interface components and meaningful graphics, such as input borders, focus rings, icons and chart lines (Success Criterion 1.4.11, Non-text Contrast).
• 7:1 for normal text at Level AAA (Success Criterion 1.4.6, Contrast Enhanced).

How Each Step Gets A Job

For every step, the tool takes the ratio against your light background and your dark background and assigns a job from the thresholds above:

• Body text, AAA at 7:1 or more, and Body text, AA at 4.5:1 or more. Use these for paragraphs, labels, links and small print.
• Large text, icons, UI borders from 3:1 to just under 4.5:1. Headings at large sizes, icons that carry meaning, input outlines and focus indicators.
• Fills and decorative only under 3:1. Tinted backgrounds, card fills, dividers and hover washes. Never text, never the only border on a form field.

The As a fill column flips the question: if the step is a button or badge background, can your light or dark page colour sit on it as text? That is how you find which steps can carry a white label.

When you generate a ramp from one colour, the tool works in OKLCH, a colour space where equal lightness steps look like equal steps to the eye. It sets ten lightness targets from 50 to 900, keeps your hue, eases chroma down toward the ends, pulls any colour that falls outside sRGB back inside it, and places your exact brand colour at the step nearest its own lightness.

Reading The Matrix

The step against step matrix shows every combination inside the ramp. It answers questions the background table cannot: can the 800 sit on the 100 for a tinted callout, or is the 600 visible as a border on the 200? Green cells pass for any text, amber cells pass only for large text and interface parts, red cells fail both.

Common Mistakes

• Testing the brand colour against white and stopping. Most mid tone brand colours fail 4.5:1 on white. The fix is to use a darker step for text and keep the brand colour for fills and large display type.
• Forgetting the dark theme. A step that is perfect body text on white is often unreadable on near black. Test both backgrounds.
• Ignoring states. Hover, focus, visited and disabled colours need their own checks. Disabled controls are exempt from 1.4.3, but focus indicators are not exempt from 1.4.11.
• Text on photos and gradients. The ratio has to hold at the lightest point behind the text. Add an overlay and test the worst spot.
• Opacity. Text at 60 percent opacity is a new colour. Test the colour it renders as, not the token it came from.

What To Do With The Result

Write the jobs into the brand guidelines next to each swatch, so a developer or a designer joining later knows that the 500 is a fill and the 700 is for links. Then put the same rules into your design tokens. Export the report for the handover pack; the share link keeps a live copy you can send for sign off.

For agencies, this is the step that separates a palette from a colour system. Wise Media runs this check on every brand ramp before it reaches a client, because a colour that fails accessibility at launch gets quietly replaced later, and the brand drifts with it.