How to Check Text Contrast with HueRoll
When choosing text and background colors, “it looks readable to me” is not a reliable test. A combination may become difficult to read for another person, on another display, or at a smaller text size. HueRoll shows the contrast ratios between the selected color and white or black. This guide explains what those numbers mean, how they relate to WCAG 2.2, and how to use them in a practical color-selection process.
Display this example in HueRoll
Open HueRoll’s color palette, select any color, and enter #3B82F6 in the detail panel’s HEX field. Press Apply and compare the white and black ratios in Contrast. Then enter #1D4ED8 to see how the white-text ratio changes.
What a contrast ratio tells you
A contrast ratio describes the difference in relative luminance between a foreground color and its background. The same color compared with itself has a ratio of 1:1. Black and white have the maximum ratio of 21:1. A higher number does not automatically make a design more attractive, but it gives you an objective way to evaluate whether there is enough light-dark separation for text.
Hue difference and contrast are not the same thing. Red and green may look like clearly different colors, yet they can still have similar relative luminance and make a poor text-background pair. Conversely, a light tint and a dark shade from the same hue family can have strong contrast. This is why checking the ratio is more dependable than judging color names or hue alone.
WCAG 2.2 contrast targets
Web Content Accessibility Guidelines (WCAG) 2.2 Success Criteria 1.4.3 (Level AA) and 1.4.6 (Level AAA) require the following contrast ratios according to text size.
- Level AA, normal text: at least 4.5:1
- Level AA, large text: at least 3:1
- Level AAA, normal text: at least 7:1
- Level AAA, large text: at least 4.5:1
For these criteria, large text is at least 18pt at normal weight or 14pt when bold, with equivalent sizes considered for other scripts. The normal-weight threshold corresponds to 24 CSS pixels. Do not lower the target simply because a label feels prominent; confirm its actual size and weight. WCAG also treats the ratios as exact thresholds. A calculated value of 4.499:1 does not pass 4.5:1 even if a display rounds it to 4.50. Choose a combination with some margin instead of designing to the boundary.
Exceptions include text in inactive controls, pure decoration, and logos. The examples below concern ordinary body text and active button labels. Meeting a text-contrast target alone does not establish Level AA or AAA conformance for the whole page.
What HueRoll checks
HueRoll treats the selected color as a background and shows its contrast ratios against white and black. This makes it quick to compare white text with black text. The current version does not compare two arbitrary colors and does not show automatic AA or AAA pass labels. Read the displayed ratio and compare it with the target that applies to your actual text.
A blue background example
Selecting #3B82F6 in HueRoll gives a contrast ratio of about 3.68:1 against white and 5.71:1 against black. For normal-size text at Level AA, black reaches the 4.5:1 target while white does not. The familiar choice of white text on a blue button is therefore not automatically readable enough for every shade of blue.
If the design requires white text, try a darker blue. With #1D4ED8, white has a ratio of about 6.70:1. That reaches Level AA for normal text, but it remains below the 7:1 target for normal text at Level AAA. The correct decision comes from combining the actual use case with the number, not from labeling a color “dark blue.”
Compare the three combinations
| Background sample | Text color | Ratio and AA target for normal text |
|---|---|---|
| #3B82F6 | White #FFFFFF | About 3.68:1 · Below target |
| #3B82F6 | Black #000000 | About 5.71:1 · Meets target |
| #1D4ED8 | White #FFFFFF | About 6.70:1 · Meets target |
You can change the text color when the background is fixed, or change the background when white text is required. The target labels in this table explain the example; HueRoll itself displays ratios without pass or fail labels.
A practical HueRoll workflow
- Choose a possible background from the 256-color palette, color picker, or HEX input.
- Open the Contrast section and read the ratios for white and black.
- Decide whether the real text is normal or large, then compare the ratio with the appropriate target.
- If the contrast is too low, adjust the color with a tint, shade, or the color picker.
- Save useful candidates to My Palette and test them in the real page, including hover, focus, pressed, disabled, and error states.
- Check controls, focus indicators, and meaningful graphics against the applicable non-text requirements.
- Use text, shapes, icons, or other cues alongside color to communicate status or meaning.
If you cannot change the background, compare white and black and start with the stronger candidate. You can also provide a consistent solid area behind the text or reconsider the placement. A text shadow by itself is not a substitute for checking the color immediately behind each part of the text.
Check harmony and readability separately
Complementary, analogous, triadic, and 60–30–10 suggestions help you explore color relationships and visual roles. They do not guarantee accessible text. After choosing a possible background from one of those groups, select it in HueRoll and check its white and black ratios separately.
HueRoll’s ratios are a reference for pairs of solid colors. A background image, gradient, transparency, outline, or overlay can change the effective background behind the text. Verify the finished interface as well. HueRoll supports the decision, but using it does not by itself certify WCAG conformance.
If you also need a different palette
The complementary and analogous color guide explores hue relationships, while the 60–30–10 guide helps assign roles. After changing a candidate, select it again in HueRoll and recheck its text contrast.