Color contrast checker

The ratio compares the relative luminance of the foreground and background colors using the WCAG contrast formula. The scale runs from 1:1 for identical luminance to 21:1 for the strongest black-and-white difference. The calculation uses the color values entered, so it does not automatically account for transparency, gradients, background images, shadows, anti-aliasing, display conditions, or a different color shown in an interactive state. Test the actual rendered colors for normal, hover, focus, active, disabled, and visited states when they differ.

For ordinary text, WCAG AA uses a minimum ratio of 4.5:1 and AAA uses 7:1. Large text uses lower thresholds because larger, sufficiently bold characters are easier to distinguish: 3:1 for AA and 4.5:1 for AAA. Whether text qualifies as large depends on its rendered size and weight, not only a design label. A pair can therefore pass for a large heading and fail for body text. Check the requirement that matches the real typography and conformance target.

Yes. Text contrast is only one part of color accessibility. Visual information required to identify user interface controls, component states, graphical objects, and keyboard focus indicators commonly needs at least 3:1 contrast against adjacent colors under WCAG non-text contrast guidance. Decorative elements and inactive controls have different considerations. Test borders, icons, charts, selected states, validation messages, and focus outlines in context. A text pair passing AA does not prove that every interactive or graphical element on the same screen is accessible.

Enter the effective foreground and background colors at the point where text or an essential graphic appears. Semi-transparent layers blend with what is behind them, and gradients or photographs create different contrast ratios across the same element. Sample the weakest relevant area, then test other likely positions and responsive crops. If contrast depends on a shadow, outline, or overlay, include the actual rendered effect in manual review. Prefer a stable solid backing behind important text when the underlying image can change.

No. Contrast is one measurable requirement. Accessible design also needs readable type, sufficient spacing, semantic structure, labels, keyboard operation, visible focus, meaningful alternatives, usable zoom and reflow, controlled motion, and instructions that do not depend on color alone. Color pairs can pass mathematically while still being difficult in thin fonts, small sizes, glare, color-vision differences, or dense layouts. Use the result as one check in a broader review and test the actual interface with representative content and states.