Color Contrast Checker

WCAG (Web Content Accessibility Guidelines) color contrast defines the minimum contrast ratios required between foreground (text) and background colors for accessible web content. WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 AAA requires 7:1 for normal text and 4.5:1 for large text. These standards are enforced by ADA, AODA, Section 508, and EN 301 549.

A good contrast ratio is at least 4.5:1 for normal text (WCAG AA) and 7:1 for enhanced accessibility (WCAG AAA). Large text (18pt+ regular or 14pt+ bold) only needs 3:1 for AA. The highest possible contrast ratio is 21:1 (pure black on pure white). Anything below 3:1 is considered inaccessible for body text.

Enter the foreground (text) color and background color in HEX, RGB, or HSL format into this tool. It calculates the relative luminance of each color using the WCAG 2.x formula and divides them to produce a contrast ratio. The tool then reports whether the combination passes WCAG AA and AAA for both normal and large text, and shows the closest accessible color if it fails.

Yes. The ADA (Americans with Disabilities Act) and AODA (Accessibility for Ontarians with Disabilities Act) both reference WCAG 2.1 AA as the technical standard. This means any color combination with a 4.5:1 contrast ratio for normal text and 3:1 for large text is ADA-compliant. Our free checker applies the WCAG 2.1 formula in real time and is suitable for ADA, AODA, Section 508, and EN 301 549 compliance audits.

Common failing combinations include: light gray on white (e.g., #999 on #fff is only 2.85:1, fails AA), yellow on white (1.07:1, fails everything), light blue on white (2.49:1, fails AA), dark red on dark blue (1.42:1, fails everything), and pastel green on pastel yellow. Generally, any combination where the colors are similar in lightness will fail. The tool flags failing combinations in red and suggests a nearest-passing alternative.

For WCAG AA, large text (18pt regular or 14pt bold and above) needs a contrast ratio of at least 3:1. For WCAG AAA, large text needs at least 4.5:1. Large text is held to a lower standard because it is easier to read at lower contrast. Note that 18pt is approximately 24px and 14pt is approximately 18.66px in CSS.

The WCAG 2.x contrast formula calculates relative luminance for each color: L = 0.2126 R + 0.7152 G + 0.0722 B, where R, G, and B are linearized sRGB values (gamma-corrected with a 0.03928 threshold). The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result ranges from 1:1 (no contrast) to 21:1 (black on white). This tool uses the exact WCAG 2.1 formula in JavaScript.

For accessible design, use dark text on light backgrounds (e.g., #0f172a on #ffffff = 17.69:1) or light text on dark backgrounds (e.g., #ffffff on #1e293b = 14.30:1). Avoid gray on white (#999 on #fff is only 2.85:1), pure red on pure green (3.05:1, also colorblind-unfriendly), and low-contrast pastels. Aim for 4.5:1 minimum (AA) on all body text and 7:1 (AAA) on user-facing text where possible. Use this checker to verify every color pair before publishing.