EZUD Color Contrast Checker: Calculate WCAG Ratios and Fix Real Interface States
Color Contrast Checker: Calculate WCAG Ratios and Fix Real Interface States
Check the foreground and background colors together, using the values the browser actually renders. For ordinary text, WCAG’s Level AA threshold is 4.5:1. For qualifying large text it is 3:1. A pale gray that looks readable on your own monitor can fall below the required ratio, especially in secondary labels and form hints.
Use the calculator for solid, opaque sRGB colors written as six-digit hexadecimal values. Then review the text size, component state and surrounding interface. The numeric result gives you a precise color-pair check to use while improving the page.
Calculate a color pair
WCAG contrast calculator
The result uses the WCAG relative-luminance formula and reports both text thresholds. Pass/fail comparisons use the full calculated value; only the displayed ratio is rounded. Inputs stay in your browser. For a transparent color, gradient or image background, first determine the actual adjacent colors and evaluate the least favorable combination behind the content.
Try black on white: the ratio is 21:1. Try #777777 on white: it is approximately 4.48:1 and fails the 4.5:1 normal-text threshold. Changing that gray to #767676 produces approximately 4.54:1, which meets that threshold. A small channel change near the boundary can change the result.
Use the threshold for the content
| Check | Threshold | What to measure |
|---|---|---|
| Normal text, AA | 4.5:1 | Text against its background |
| Large text, AA | 3:1 | Text that meets WCAG’s large-scale definition |
| Normal text, AAA | 7:1 | Text against its background |
| Large text, AAA | 4.5:1 | Qualifying large text against its background |
| Required control and graphic information, AA | 3:1 | The relevant visual information against adjacent colors |
WCAG defines large text using at least 18 point type, or at least 14 point bold type, with equivalent sizes for relevant fonts. In CSS units, 18 points corresponds to 24 pixels; 14 points corresponds to about 18.67 pixels. Check the actual font size and weight rather than assuming every heading qualifies.
The text criteria include exceptions for certain incidental content, inactive controls and logos. Apply an exception only to the content it covers. A form hint, a price or an instruction that someone needs to read should be evaluated as meaningful text.
Measure colors from the implemented page
Inspect the element’s computed text color and the background behind it. Check inherited styles, opacity and any overlay. A design file’s token names can be useful, but the rendered page may combine them differently after a theme or component change.
For text over an image, inspect the full area the text occupies at each layout size. A dark corner behind one line does not establish the contrast behind the next line. A solid backing panel or sufficiently opaque overlay can make the relationship easier to control. Test the result after the image crops or the text wraps on a phone.
Avoid sampling the anti-aliased edge of a glyph as though it were the intended text color. W3C’s contrast guidance bases the assessment on the specified foreground and background colors. Keep a screenshot for locating the issue and record the actual values for reproducing the calculation.
Check each state of the component
Make a small inventory of states before declaring a component finished. Include default, hover, focus, selected, expanded, error and loading states where they exist. Test light and dark themes separately.
For a form field, check its label, hint, entered value, error message and any boundary needed to identify the control. A dark label does not compensate for a nearly invisible error message. For an icon button, check the icon against the button background, as well as any text label or tooltip used to explain it.
The non-text contrast criterion concerns visual information needed to identify controls and states, and parts of graphics needed to understand the content. Evaluate those relationships directly. If a chart uses pale bars against a white background, inspect the meaningful shapes and labels rather than checking only the title.
Repair the color pair with a clear priority
For ordinary body text, first adjust the foreground toward a stronger contrast while retaining a comfortable overall design. For colored buttons, compare changing the label color, changing the fill or both. Keep the same action recognizable across its states.
Record the before and after values in the component issue. For example, a label changing from #777777 to #767676 on white crosses the AA threshold, but a more substantial margin can be useful when the component also appears over slightly different surfaces. Choose a token that works in every intended context, or define separate tokens for those contexts.
Use text or another visible cue alongside color when communicating a status or error. A stronger red still leaves a user needing to know which field failed and how to fix it. Pair the visual treatment with an explicit message and a programmatic relationship to the affected control.
Understand the calculation
For each red, green and blue channel, divide the 8-bit value by 255. Convert that sRGB value to a linear value: at or below 0.04045, divide by 12.92; otherwise use ((value + 0.055) / 1.055) ^ 2.4.
Relative luminance is 0.2126R + 0.7152G + 0.0722B using those linear values. The contrast ratio is (lighter luminance + 0.05) / (darker luminance + 0.05). Reversing the two input colors produces the same ratio.
Keep the unrounded ratio for comparison. A calculated 4.499:1 remains below 4.5:1 even if a display rounds it to 4.50. This is especially useful when validating a calculator or reviewing a borderline color token.
Save a result another person can repeat
Record the page or component, state, theme, text size and weight, foreground, background, calculated ratio and target criterion. Include the viewport when the background changes with layout. For a failure, record the replacement colors and retest the same state after implementation.
Use the result alongside keyboard, labeling, zoom and assistive-technology checks. Contrast addresses one part of using the interface. A clear label, predictable interaction and readable layout help the stronger colors serve a useful purpose.