Test HEX text and background colors with a contrast checker that previews readability and suggests clear fixes.
Design accessible interfaces that everyone can enjoy.
Color Contrast Checker compares a text color with a background color and returns a contrast ratio for the visible pair. The result is useful when a HEX color looks acceptable by eye but needs a measurable accessibility check before it becomes body text, a button label, a card title, a form label, or another interface element.
The control panel uses two color roles: Text Color and Background Color. Each role has a HEX input, a color picker, a Lightness slider, and an Opacity slider. The live preview places the selected pair on a sample heading, paragraph, and button so the ratio is not just a number. The preview helps you judge whether the pair still feels readable in a realistic interface setting.
Color Contrast Checker reports the current ratio beside a status badge and then shows readability checks for normal text, large text, and stricter high-contrast targets. The Smart Advisor adds practical guidance. When the pair is strong, it confirms that no fix is needed. When the pair is weak, it can suggest a more readable text or background alternative, a high contrast option, or a black and white fallback.
Use Color Contrast Checker as a focused contrast checker for one foreground and background pair at a time. It is especially useful when a design decision is almost finished and the remaining question is whether the exact visible combination is safe enough for text. The calculation uses the displayed colors after opacity is flattened, so lowering opacity can reduce the final ratio even when the original HEX values look strong.
The ratio compares the relative luminance of the lighter visible color and the darker visible color. A higher value means stronger separation. A result near 1:1 means the colors are very similar, while very high values approach black against white or white against black. The readability rows make that value easier to interpret for text decisions.
| Result row | Threshold shown by the checker | Use it for |
|---|---|---|
| AA Normal | 4.5:1 | Body text, labels, navigation text, form text, and most small interface copy. |
| AA Large | 3:1 | Large headings or large bold text where the text size gives additional legibility. |
| AAA Normal | 7:1 | High priority normal text where stronger readability is desirable. |
| AAA Large | 4.5:1 | Large text that needs a stricter readability target than the AA large text check. |
A pair that passes AA Large but fails AA Normal should not be used for normal body copy. That result usually means the colors may work for a large display heading but are too close for paragraph text, small buttons, compact navigation labels, or chart annotations. A pair that passes AAA Normal gives more room for real-world variations such as lower quality displays, sunlight, user zoom, and color vision differences.
The rows should be interpreted by text role rather than by personal preference. Paragraphs, form labels, menu items, small badges, captions, and helper text need the normal text rows because those elements are read at smaller sizes. Large text rows are useful for big headings, hero statements, or display labels only when the actual type size is large enough. When the same color pair will be used in several sizes, judge it by the strictest role it must support.
Do not treat AA and AAA as style labels. They are checkpoints for different contrast targets. A brand palette can contain AA safe pairs, AAA safe pairs, and decorative pairs at the same time. The important decision is assigning each pair to the correct job so readable text never depends on a decorative color relationship.
Color Contrast Checker is also useful when a palette contains many attractive colors but only a few of them should carry text. A bright accent may be fine for icons or decorative borders and still fail as a background for white text. A muted surface may look elegant and still need a darker foreground. Testing the exact pair prevents those assumptions from reaching production UI.
For design tokens, test both the intended direction and the reversed direction. A purple surface with white text may pass, while purple text on a pale surface may need a different shade. A neutral surface may be safe with dark text but unsafe with a low opacity secondary label. Rechecking the role prevents a color that is safe in one context from being reused in another context where the contrast changes.
For review notes, record the foreground HEX, background HEX, opacity choices, and ratio together. A ratio without its colors is difficult to reproduce later, and a HEX pair without opacity can be misleading when transparency was part of the tested design. Keeping the tested values together makes the result easier to hand to a developer or compare against a design file.
Lightness and opacity affect contrast in different ways. Lightness changes the color tone while keeping the color related to its original hue. Opacity changes how the color blends with the surface behind it. Both controls can make a pair pass or fail, so they should be used deliberately.
| Control | What changes | Risk to watch |
|---|---|---|
| Text Lightness | Makes the foreground lighter or darker while keeping the hue relationship. | Small changes may improve the ratio without changing the brand feel, but too much adjustment can change the intended color role. |
| Background Lightness | Makes the surface lighter or darker while preserving the same hue direction. | A background that becomes too close to the text color can reduce readability quickly. |
| Text Opacity | Blends the foreground with the background before the ratio is calculated. | Low opacity often makes text weaker, especially on tinted surfaces. |
| Background Opacity | Blends the surface color with the underlying interface surface. | A transparent background can look different from the selected HEX value, so the final ratio must be rechecked. |
Smart Advisor turns a failing or borderline pair into a set of practical next choices. When the text is the likely problem, the suggestions focus on the foreground. When the background is the likely problem, the suggestions focus on the surface. This keeps the advice close to the actual color role instead of changing both colors at once.
The Intelligent Fix option adjusts tone toward an AA friendly result when possible. The High Contrast option targets a stronger ratio when the design can accept a more visible shift. The black or white safe option gives a fast reference point when a design needs a reliable fallback. If the pair already reaches a strong AAA result, Smart Advisor changes from correction mode to confirmation mode and reminds you not to weaken the pair with unnecessary opacity changes.
Advisor suggestions should still be checked in the preview. A mathematically stronger color may change the visual hierarchy, make an accent feel too heavy, or reduce consistency with nearby components. The best fix is usually the smallest visible adjustment that reaches the required text target. When a small tone adjustment is not enough, switch the color role, use a more neutral surface, or reserve the weaker color for non-text decoration.
A primary button is a good example of role-based testing. Check the label color against the button background, not against the surrounding card. If the button has a hover state with a darker or lighter background, test that state as a separate pair. A button can pass in its default state and fail after a hover, active, or disabled style lowers the text opacity.
A card layout needs a different check. The card title, description, metadata, and link may each use a separate foreground color against the same card surface. The title may pass easily, while secondary metadata may fall below the normal text target because it uses a lighter gray. In that case, the background may be fine and only the low emphasis text color needs adjustment.
A chart label or badge can be more sensitive than a paragraph because the text is often small and placed inside a compact colored shape. Test the exact label color against the exact badge fill. If the pair only passes large text, it is not appropriate for small chips, legends, or inline status labels.
For a larger palette review, use Contrast Checker Pro to compare several colors in a matrix before choosing foreground and background roles. When you still need to select an exact HEX value before testing contrast, use Color Picker and then bring the chosen value back into Color Contrast Checker.