Contrast Checker

How do you check a text color and understand the result?

Set Foreground (text) to your text color and Background to the surface behind it. Results update as you change either value. For a worked example, choose the Blue on White sample: #3b82f6 on #ffffff at full opacity produces 3.68:1. It passes AA for large text and the UI component contrast threshold, but fails AA for normal text and both AAA text thresholds.

Compare the built-in gray samples below before changing a design token. These are opaque foregrounds on white, calculated with the same WCAG relative-luminance formula as the checker. A displayed ratio rounds to two decimal places; pass/fail decisions use the underlying unrounded number.

Built-in sample foregrounds on #ffffff at 100% opacity

Foreground	Ratio	Normal text AA	Normal text AAA
#3b82f6	3.68:1	Fail	Fail
#767676	4.54:1	Pass	Fail
#595959	7.00:1	Pass	Pass

Preview Text lets you enter your own wording while retaining separate body and small-text samples. Inspect those alongside the numerical badges. The preview is useful for judging a pair, but the checker does not read typography, backgrounds, or interaction states from another website.

Which WCAG thresholds apply to text and interface elements?

WCAG 2.2 SC 1.4.3 requires 4.5:1 for normal text and 3:1 for large text. SC 1.4.6 raises those thresholds to 7:1 and 4.5:1 respectively. Large text means at least 18pt regular, equivalent to 24 CSS pixels, or 14pt bold, approximately 18.67 CSS pixels. A passing large-text badge does not make the same pair suitable for paragraph text.

SC 1.4.11 uses 3:1 for visual information needed to identify interface components, states, and graphical objects against adjacent colors. This is not a requirement for every decorative border. Inactive controls and purely decorative text have exceptions; placeholder text is not automatically exempt. Check labels, hints, and errors in their rendered state, then review the rest of the interface separately.

How is the contrast ratio calculated?

The WCAG 2.2 formula is (Llighter + 0.05) / (Ldarker + 0.05). Each sRGB channel is divided by 255, then linearized: values at or below 0.04045 are divided by 12.92; higher values use ((c + 0.055) / 1.055)^2.4. Relative luminance is 0.2126R + 0.7152G + 0.0722B using those linear channels.

The resulting ratio ranges from 1:1 to 21:1. Black on white reaches 21:1; equal luminance yields 1:1 even when hues differ. Swapping two opaque colors preserves the WCAG ratio. With translucent text, swapping the base colors changes the blend, so it need not preserve the result.

Which color formats and opacity settings are supported?

The CSS fields parse hex, rgb(), rgba(), hsl(), hsla(), oklch(), and recognized CSS names. Hex accepts 3, 4, 6, or 8 digits with a leading hash. Values become sRGB hex before analysis; out-of-gamut oklch channels are clamped. Invalid CSS input shows an error and leaves the previous valid color active. Resolve variables and unsupported color expressions before pasting them, or use Color Converter to inspect a color separately.

Foreground opacity ranges from 0% to 100%. For each channel, the checker calculates round(foreground × alpha + background × (1 − alpha)) before measuring luminance. At 0%, text becomes the background and contrast is 1:1. Background alpha is ignored: supply the final opaque surface color rather than expecting multiple translucent layers to be composited.

How does checking a gradient differ from checking an image?

Gradient mode supports two to five evenly spaced stops and an angle. Its analysis interpolates channels in sRGB, rounds sampled colors, and measures 64 evenly spaced positions, including the endpoints. Foreground opacity is applied separately at each position. Worst (min), Best (max), and Worst at describe those samples; badges use the lowest sampled ratio.

This is a sampled estimate across the gradient, not an exhaustive pixel test or a calculation limited to the area behind your particular letters. Changing Angle changes the preview direction but not the sampled color sequence. Photographs, radial gradients, and custom stop positions are outside this editor. Test image regions manually; consider a solid backing when text crosses unpredictable colors.

How do Suggested Fixes and the palette matrix help?

Suggested Fixes targets AA 4.5:1 or AAA 7:1 for normal text. The search mixes toward black in one-percent steps, trying white if darkening cannot reach the target. It does not optimize perceptual distance or preserve a specific hue. Apply a foreground adjustment to reset opacity to 100%, then read the recalculated result. Background suggestions are unavailable for gradients or translucent foregrounds.

For design tokens, paste two to twelve colors into Palette contrast matrix. Rows are foregrounds; columns are backgrounds. Extra valid colors beyond twelve are ignored with a notice, and invalid entries are listed. Only passing AA hides cells below 4.5:1; Copy as CSV still includes the complete matrix. A cell loads its pair into Solid mode. Use Color Shades Generator to explore alternatives, then retest the actual pairs.

What do APCA and the color-vision previews tell you?

APCA Lc is an additional polarity-aware score: positive for darker text on a lighter surface and negative for lighter text on a darker surface. Its magnitude selects the displayed guidance category. Font size and weight are not inputs to this calculation, and its labels do not replace WCAG AA or AAA decisions.

Color-vision previews transform both foreground and background for a visual comparison. In Gradient mode they use the worst sampled background. Their role is to help inspect the pair alongside the numerical results; they do not diagnose a viewer or certify a complete interface.

How do the color-vision deficiency types differ?

Color contrast and color discrimination are related design concerns, but they are not interchangeable. Two hues can look distinct to one person and similar to another. The previews help examine that possibility without changing the original color pair or its WCAG threshold calculation.

What the six color-vision previews represent

Preview	Modeled distinction
Protanopia	A dichromatic model associated with absent functioning long-wavelength cone input
Protanomaly	Altered long-wavelength sensitivity, approximated toward the protanopia result
Deuteranopia	A dichromatic model associated with absent functioning medium-wavelength cone input
Deuteranomaly	Altered medium-wavelength sensitivity, approximated toward the deuteranopia result
Tritanopia	A dichromatic model associated with absent functioning short-wavelength cone input
Achromatopsia	A grayscale approximation without hue distinctions

Protan and deutan differences commonly affect red-green distinctions; tritan differences affect blue-yellow distinctions. Real experiences vary, and a transformation does not model every aspect of an eye condition. For status messages, supplement colored borders with explicit labels such as Error or Complete. In charts, use labels, line styles or markers so users do not need to identify a hue to interpret a series.

How do you choose accessible pairs for an actual interface?

Anchor the surface first, then adjust the text against that exact background. For a white card with a brand-colored label, test the brand color as normal text. If it fails, choose a darker text variant and retain the brighter color for uses that meet their own requirements. The blue sample above illustrates why a color suitable for a large heading can fail on a smaller label.

Repeat the process for dark surfaces instead of reusing a light-theme decision. For example, if a dark background has relative luminance 0.005, a lighter foreground needs at least 0.1975 to reach 4.5:1: (0.1975 + 0.05) ÷ (0.005 + 0.05) = 4.5. These are linear relative-luminance values, not HSL lightness percentages. Test body text, secondary text, placeholders and button labels against their respective surfaces. Include hover, focus, selected and error states. A foreground that passes on the main canvas may fail on a tinted card or beside an overlay.

Use Suggested Fixes to obtain a candidate, then verify the resulting combination in the rendered interface. Preserve semantic roles in your tokens: a decorative accent and a text accent need not share one value. Avoid reducing opacity to make secondary text quieter without recalculating its blended contrast. Record approved pairs together so another component does not accidentally use the foreground on a different background.

How should you check links and reuse the results?

The Link contrast helper compares Link color with the entered body foreground at a 3:1 threshold. W3C Technique G183 describes this contrast-based distinction; the helper also recommends a visual cue on hover and keyboard focus. Alternatively, keep a non-color cue such as an underline visible. Also test the link against its background in the main checker; the helper checks only link versus body text.

Copy Result exports a text summary; Copy CSS exports foreground/background declarations, including the gradient when selected. Copy URL preserves colors, foreground opacity, gradient stops, and angle in the URL fragment. Calculations run in the browser, and up to ten recent color pairs are retained in local storage. Recent-pair history does not preserve gradient settings; use the shared URL for those.