Free Color Contrast Checker — WCAG 2.1 Accessibility Tool

AAA (7:1) is optional but recommended for body text. Try darkening the text color or lightening the background until the ratio exceeds 7:1. Small HEX adjustments to your darkest shade often close the gap.

Visual perception varies significantly. WCAG ratios are a mathematical standard designed for users with low vision, not average-sighted users. For legal and inclusive design compliance, the ratio is what matters — not personal readability judgement.

Consider using the brand color for large headings (which only need 3:1 for AA) and switching to a darker tint of the same hue for body text. Most brand palettes include a range of shades — test each.

This tool checks solid HEX colors only. For transparent text, calculate the actual rendered color (blend the foreground alpha with the background) and check that resulting solid color instead.

The WCAG (Web Content Accessibility Guidelines) contrast ratio measures the luminance difference between two colors. It ranges from 1:1 (no contrast) to 21:1 (black on white). Higher ratios mean more contrast and better readability for users with vision impairments.

AA is the minimum accessibility standard required by most laws and guidelines (4.5:1 for normal text, 3:1 for large text). AAA is the enhanced standard (7:1 for normal text, 4.5:1 for large text) — it is not legally required but provides the best readability for users with severe low vision.

WCAG defines large text as text that is at least 18pt (24px) in regular weight, or at least 14pt (approximately 18.67px) in bold weight. Large text has a lower contrast requirement (3:1 for AA) because size compensates for reduced contrast.

UI components such as icons, button borders, input outlines, and focus indicators require a 3:1 contrast ratio against adjacent colors to pass WCAG 2.1 AA. This applies to the visual boundaries of interactive elements, not their text labels.

WCAG contrast requirements apply to text and meaningful UI components, not decorative images. However, text overlaid on images must meet contrast requirements against the actual rendered background pixels — not just the image as a whole.

No — enter 6-digit HEX codes only (e.g. #1a1a1a). Convert RGB or HSL to HEX using any CSS color converter before checking contrast here.

Yes. Contrast ratio is symmetric — swapping the two colors produces the identical ratio. The calculation only depends on the luminance values, not which color is foreground or background.

WCAG 2.1 Level AA is referenced by the ADA (USA), AODA (Canada), EN 301 549 (EU), and many other national digital accessibility laws. If your website serves the public or is a commercial product, AA compliance is typically the legal baseline.

The most direct fix is to darken the text color or lighten the background (or both). Avoid fixing contrast by adding a text shadow or outline — those are not counted in WCAG calculations. If you cannot change the brand color, try a darker tint of the same hue.

Yes. Placeholder text in form inputs is commonly styled at low opacity (e.g. 50% gray) and frequently fails the 4.5:1 ratio requirement. Check your placeholder text color against the input background as a separate color pair.