What a contrast ratio measures
Text contrast compares the relative luminance of a foreground color with the relative luminance of its background. For opaque sRGB colors, each channel is normalized and linearized before the red, green, and blue contributions are combined. The lighter luminance plus 0.05 is divided by the darker luminance plus 0.05. The result ranges from 1:1 for identical colors to 21:1 for black and white.
HueWiz makes its pass or fail decision from the unrounded value. White on #777777 is approximately 4.478:1, so it fails the 4.5:1 normal-text threshold even if a one-decimal display would read 4.5. This avoids approving a borderline pair because of presentation rounding.
AA and AAA text thresholds
Under WCAG 2, ordinary text needs at least 4.5:1 for Level AA and 7:1 for Level AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. WCAG defines large text as at least 24 CSS pixels at normal weight, or about 18.67 CSS pixels when bold. A logo or incidental decorative text may fall under an exception, but those exceptions should not be used to excuse essential instructions or controls.
Passing AAA is valuable when it fits the design, but AA is the common conformance target. A numeric pass is only one part of readability: typeface, weight, size, spacing, glare, display quality, and user vision can still affect the result. Build some margin above a threshold when you can instead of selecting a color that barely passes.
Non-text contrast and interface states
Buttons, form fields, focus indicators, charts, and icons can have requirements beyond text contrast. WCAG Success Criterion 1.4.11 generally requires a 3:1 contrast difference for visual information needed to identify user-interface components and states. The comparison may be between the component and adjacent colors rather than between text and its background.
Test every state that communicates something: default, hover, keyboard focus, active, selected, error, and disabled. Do not rely on hue alone to distinguish success from error or one chart series from another. Add text, icons, patterns, borders, or position so the meaning remains available to people with color-vision differences.
Common mistakes when checking colors
This checker accepts two opaque sRGB values. If text sits over a photograph, gradient, transparency, or blend mode, first determine the actual composited color behind the text, then test the lightest and darkest relevant areas. Placeholder text still needs readable treatment when it conveys information. Very thin font strokes can appear weaker than their calculated ratio suggests, especially on low-quality displays.
Do not test only the brand swatches in isolation. Test the pairs as they appear in the component: text on the exact button fill, links against the page surface, focus rings against neighboring pixels, and error copy against its real panel background. Recheck both light and dark themes.
WCAG 2 and APCA
APCA is a perceptual contrast method being explored for future accessibility guidance. It accounts for factors and polarity in a different way from the WCAG 2 ratio, so its numbers are not interchangeable with 4.5:1 or 3:1. Current WCAG 2 conformance should still be evaluated with the published relative-luminance method. HueWiz reports that established ratio and does not present an APCA score as a certification.
A color-pair result cannot certify a full website. Keyboard access, labels, headings, alternative text, zoom behavior, motion, and many other requirements need separate review. Read the HueWiz accessibility guide and the W3C explanation of contrast minimum for the normative context.