カラーコントラストチェッカー

Why contrast is an accessibility requirement, not a preference

Text that is too close in brightness to its background is hard to read — and for people with low vision, color blindness, or anyone using a phone in bright sunlight, it can be unreadable. The Web Content Accessibility Guidelines (WCAG) turn "readable enough" into a measurable number called the contrast ratio, ranging from 1:1 (foreground and background identical) to 21:1 (pure black on pure white). This tool computes that ratio for any two colors and tells you which WCAG levels they pass, so design decisions stop being guesswork.

The formula, step by step

The contrast ratio is not based on the raw HEX values — it is based on how bright each color appears to the human eye. The calculation has three stages, exactly as WCAG defines it:

1. Linearize each channel. Each of the red, green, and blue values (0–255) is divided by 255 and then "gamma-corrected" to undo the non-linear way screens encode brightness. Small values are scaled by 12.92; larger ones use ((v + 0.055) / 1.055)^2.4.
2. Compute relative luminance. The three linear channels are weighted by how sensitive our eyes are to each: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Green dominates because the eye is most sensitive to it, which is why two colors with the same "lightness" can have very different luminance.
3. Form the ratio. With the lighter luminance L1 and darker L2, the ratio is (L1 + 0.05) / (L2 + 0.05). The + 0.05 accounts for ambient screen glare so the result never divides by zero.

A worked example

Take a common case: gray text #777777 on a white background #FFFFFF. White has a relative luminance of 1.0. Mid-gray #777777 works out to about 0.18. The ratio is (1.0 + 0.05) / (0.18 + 0.05) ≈ 4.56:1. That just clears the AA threshold for normal text (4.5:1) — so this gray is acceptable for body copy, but only barely, and it fails the stricter AAA level (7:1). Darkening the text to #595959 would push it comfortably above AA.

The WCAG thresholds the tool checks

"Large" text gets an easier threshold because bigger letters are legible at lower contrast. AA is the level most laws and corporate standards require; AAA is a stretch goal for maximum accessibility.

The automatic suggestion feature

When a pair fails AA normal, the tool searches for a fix. It nudges the foreground darker one step at a time, recomputing the ratio until it crosses 4.5:1, and separately tries lightening the background and lightening the foreground. It then offers the nearest passing colors with their resulting ratios — a practical shortcut when you want to keep your palette close to the original while making it compliant.

Tips and common mistakes

• Contrast is independent of hue. Two vivid colors — say red on green — can look "high contrast" yet have a low luminance ratio and be miserable to read. Always trust the number, not the visual punch.
• Test text over its real background. If text sits on an image or a gradient, check it against the lightest and darkest points it overlaps, not an average.
• Don't rely on color alone. Meeting the ratio helps everyone, but for users who cannot distinguish certain hues, pair color with another cue like an icon or underline.
• Placeholder and disabled text still matter. Faint gray placeholders frequently fail AA. If they convey real information, they need to meet contrast too.
• Larger isn't a loophole. The 3:1 "large text" allowance only applies above the size threshold — shrinking that heading back to body size re-imposes the 4.5:1 rule.

Privacy

The luminance and ratio math runs entirely in your browser. The colors you enter are never sent anywhere, the live preview updates locally, and the tool works with your network disconnected.