Cardona CT LabAI Tooling · Design & Accessibility
Accessibility utility · WCAG 2.x · Section 508

508 Contrast Checker

Pick a text color and a background, get the WCAG contrast ratio and a clear pass or fail for AA, AAA, and non-text UI components. Sample from anything on screen with the eyedropper, type a hex, or use the color picker.

Foreground (text)

Accepts a 3 or 6 digit hex color, with or without a leading hash.

Background

Accepts a 3 or 6 digit hex color, with or without a leading hash.

Contrast results

21.00 : 1 contrast ratio
AA normal text needs 4.5 : 1
AA large text needs 3 : 1
AAA normal text needs 7 : 1
AAA large text needs 4.5 : 1
Non-text / UI (1.4.11) needs 3 : 1

Large text is 18pt (24px) regular, or 14pt (about 18.66px) bold. Ratios under 1.4.3 (text) and 1.4.11 (non-text). Ratio is rounded down to two decimals so a borderline value never reads as a false pass.

Live preview

Large heading text

Normal body text reads at this size. Accessible color contrast keeps your interface legible for low-vision users and in bright sunlight on a phone. The eyes you save may be your own.

UI component border