Calculate the contrast ratio between foreground and background colors and check WCAG 2.2 AA and AAA results. Compare the normal text, large text and interface component thresholds on one screen, and when a pair fails, get a passing alternative that keeps the original hue. Paste several HEX colors to audit every foreground and background combination in one matrix.
Runs in your browser: what you enter is never uploaded.
Large text means at least 18pt (about 24px), or 14pt bold (about 18.5px). Thin or unusual typefaces may need more contrast than the numbers suggest.
This pair already meets the selected target.
The hue stays fixed and lightness is adjusted first. Chroma is lowered only as far as needed for colors a screen cannot display.
This sentence is set at body size. Check whether it stays comfortable to read on a real screen.
A large heading line
The preview is for judging how the pair feels, not for deciding pass or fail.
Color contrast describes how clearly foreground content differs in lightness from its background. Two colors can look different in hue while still having a low contrast ratio if their luminance is similar. The reverse is also true: similar hues can reach a high ratio when their lightness differs enough.
Test the foreground and background colors that will actually appear together instead of judging a brand color by its name or by how it feels on its own.
WCAG 2.2 uses the relative luminance of sRGB colors. If L1 is the relative luminance of the lighter color and L2 is that of the darker color, the ratio is (L1 + 0.05) / (L2 + 0.05). Identical colors have a ratio of 1:1, while black and white reach the maximum of 21:1. The ratio is not a visual quality score. It indicates whether a color pair reaches a minimum requirement for a specific use.
Thresholds must be evaluated without rounding. A calculated ratio of 4.499:1 does not meet a 4.5:1 requirement. This tool uses the unrounded value for pass or fail and shows an additional decimal place near a threshold.
Normal text and images of text need 4.5:1 for AA and 7:1 for AAA. Large text relaxes to 3:1 for AA and 4.5:1 for AAA. User interface components and meaningful graphics need 3:1 for AA and have no separate AAA threshold.
Large text generally means at least 18pt, approximately 24 CSS pixels, or at least 14pt bold, approximately 18.5 CSS pixels. Very thin or unusual typefaces can appear less legible even when the calculated pair passes. When a result barely reaches the threshold, increasing the contrast is safer than relying on text size alone.
Logotypes, purely decorative text and inactive controls can be exempt from some contrast requirements. A logo that also functions as a control, or a component that only appears disabled, requires separate review.
Visual information required to identify a control or understand its state should have at least 3:1 contrast against adjacent colors. If a border is the only cue that an input exists, compare the border with the outer background. Check marks, dropdown arrows, selected-state indicators and custom focus rings should also be compared with the colors next to them.
Not every button needs a 3:1 outline. If text, an icon or the surrounding context already identifies the control, the boundary of the full hit area does not have to be visible. The visual information people actually rely on must still meet its applicable contrast requirement.
The palette audit compares every color as both foreground and background. Start by finding text-and-surface pairs that reach 4.5:1. Use pairs at or above 3:1 for visible control boundaries, icons and essential chart lines. An accent color that fails for body text may still work for large text or a substantial icon.
A palette is not automatically accessible because it contains many passing cells. Review only combinations that will appear together and include default, hover, focus, selected and error states. Audit light and dark themes separately, because the same foreground color can pass on one surface and fail on another.
For body text, keep the surface color and adjust the text lighter or darker first. If a brand color must remain unchanged, use it for a larger surface or for decoration and choose a separate high-contrast color for the information itself.
Bring control boundaries and icons above 3:1 against their adjacent colors. Thin lines benefit from extra margin above the minimum. Apply the 3:1 large-text threshold only when the delivered size and weight actually meet the large-text definition. Add text, icons, patterns or shapes to error, success and selected states instead of relying on color alone.
The suggested color keeps the original hue and adjusts lightness first. Chroma is reduced only when necessary to keep a candidate inside the sRGB gamut. Treat the result as a practical starting point, not a replacement for reviewing the actual interface and brand system.
Meeting a contrast ratio does not satisfy every color requirement. Red error and green success colors can each contrast strongly with the background while still being indistinguishable to a user when color is the only state cue. Add a visible label, icon, pattern or other non-color signal.
When an inline link has no underline and color is the only difference, its color should differ from the surrounding text by at least 3:1 and gain another visual cue on focus or hover. Keeping an underline in the default state is the simpler and more robust choice.
Confirm that body text and placeholder text reach 4.5:1 against their actual backgrounds, and that every heading using the 3:1 threshold really is delivered at large-text size and weight. Input boundaries, icons, focus indicators and selected states should reach 3:1 against adjacent colors.
Check light and dark themes along with default, hover, focus, selected and error states, and make sure text over an image or gradient stays readable in its lowest-contrast area. Finally, verify that links, errors, states and chart series are distinguishable without color alone.
Targeting body AA and adjusting the foreground suggests #707782 at 4.52:1: the same grey tone, only darker.
If the label is small text, switch the adjusted role to the background. #5170D7 at 4.52:1 is suggested, so the white label can stay as it is.
#64748B reaches 4.76:1 on white and works for body text, but only 3.86:1 on #E2E8F0, where it is limited to large text and UI use.
What it is, who it's for, how it works and why you'd use it.
A color contrast checker calculates the relative luminance difference between foreground and background colors and reports their WCAG 2.2 results.
It is for designers and front-end developers reviewing text, controls, icons and data visualization colors for web or app interfaces.
It calculates a contrast ratio from the sRGB relative luminance of two colors and compares every foreground and background pair when a palette is provided.
It helps teams identify low-contrast combinations during design and implementation and find a close alternative that meets the selected target.