Test HEX text and background colours with a contrast checker that previews readability and suggests clear fixes.
Design accessible interfaces that everyone can enjoy.
Colour Contrast Checker compares a text colour against a background colour and turns the pair into a readable contrast ratio. The result matters when body copy, buttons, form labels, badges, navigation links or chart labels need to remain clear on light, dark or saturated backgrounds. A pair that looks attractive in a design file can still fail for small text, especially when the foreground colour is thin, semi-transparent or placed on a vivid brand colour.
The checker shows the live sample, the current ratio, pass or fail status and readability checks for normal and large text. It also gives practical feedback through the Smart Advisor area, so a weak pair can be corrected without guessing whether the text colour or the background colour needs the stronger adjustment. The controls are intentionally direct: pick or type HEX values, change lightness, adjust opacity, swap the pair or reset the controls.
A good contrast checker is useful before finalising website themes, landing pages, dashboards, social graphics, component libraries and design system tokens. The safest habit is to test the exact foreground and background pair that users will see, not only the nearest brand colour in a palette. A blue button, a pale label, a grey disabled state and a white card can each need a separate contrast check.
The contrast ratio is a numeric comparison between the relative luminance of the two colours. A higher number means stronger separation. Ordinary interface text usually needs more contrast than large headings because small letterforms are harder to read. Stronger readability targets are useful for long reading areas, critical instructions and interfaces that need a more conservative accessibility margin.
Do not read the ratio as a beauty score. A pair can pass and still feel too harsh for a calm brand, or fail even though it looks balanced on a bright monitor. The ratio answers a narrow accessibility question: whether the text and background have enough luminance contrast for readability. Typography, spacing, font weight and context still matter after the colour pair passes.
| Visible result | Meaning | Practical response |
|---|---|---|
| AAA or Excellent | The pair has strong separation for normal and large text. | Use it for body copy, controls and important interface text. |
| AA Normal or Good | The pair meets a common readability target for normal text. | Suitable for most UI text, but still check small fonts and low font weights. |
| AA Large or Partial | The pair may only work for larger or heavier text. | Avoid small labels, helper text and dense paragraphs with this pair. |
| Poor or Fail | The foreground and background are too close in luminance. | Darken one colour, lighten the other, or choose a safer alternative. |
AA is a practical minimum for most interface text, but AAA is a better target when the text carries important instructions, long-form reading, legal information, price details, error messages or other content that users should not struggle to read. A design can use AA for secondary controls and AAA for critical copy, as long as the rules are documented and applied consistently.
Large text thresholds are useful for headings, hero statements and prominent labels, but they should not be used as a shortcut for small UI text. A card title may qualify as large text while the supporting description, badge or call-to-action label does not. Check each real text size and role before deciding that one ratio covers the whole component.
Opacity can make a previously safe colour pair fail because the final colour is blended with whatever sits behind it. Semi-transparent white text over a coloured background may look softer, but the effective foreground is no longer pure white. The same issue appears with translucent panels, disabled labels and overlays placed above images.
When a design uses transparency, test the colour after the transparency is applied. If the exact rendered colour is not available, use the opacity controls to approximate the visual result and then check again in the finished layout. The safest production choice is a solid text colour on a stable background for body copy and important controls.
Test contrast whenever a colour is used for information, navigation or interaction. Primary buttons, secondary buttons, error messages, success states, tabs, chips, badges, chart labels and form validation text all depend on the text remaining legible. Decorative shapes and purely visual accents can be treated differently, but anything a user must read should be checked.
Background complexity can change the decision. A colour that works on a plain white surface may fail on an image overlay, a tinted card, a gradient or a semi-transparent panel. For overlays, test the colour that appears after transparency has been applied, because the final visual colour is what affects readability. Opacity controls help approximate that situation when the design uses translucent foregrounds or backgrounds.
Keep a small record of the checked pair when it becomes part of a design system. The record should include the foreground HEX value, the background HEX value, the ratio, the intended text size and whether the pair is approved for normal text, large text or decoration only. That note prevents the same colour from being reused later in a context where it no longer passes.
The quickest improvement is usually to increase the luminance distance. Dark text needs a lighter background, while light text needs a darker background. When the pair is close to passing, a small lightness adjustment can be enough. When the ratio is far below the target, choose a more distinct shade rather than making several tiny changes that still leave the text hard to read.
Preserve the design intent where possible. A purple button can stay purple while the text moves from pale grey to white, or the background moves from mid purple to a deeper shade. If a brand palette is strict, check alternative text sizes, font weights or component states before rejecting the colour completely. For choosing a new shade from scratch, Colour Picker can help refine the HEX value before returning to the contrast check.
Recheck the pair after any brand refresh, typography change or theme update, because even small visual changes can affect whether the same colour combination remains comfortable to read.