Text Heading & Body Contrast Tool
Evaluate compliance specifically for body text (4.5:1 ratio) and large headings (3:1 ratio) against backgrounds with typography scale previews.
100% Client-SideZero Data Collection
WCAG Contrast
17.06:1
Body Text (Normal)Target ≥ 4.5:1
Large HeadingsTarget ≥ 3.0:1
Real-Time Typography Scale Staging
Display Title (36px)The quick brown fox jumps over the lazy dog
Section Heading (24px)The quick brown fox jumps over the lazy dog
Subheading (18px)The quick brown fox jumps over the lazy dog
Standard Body (16px)The quick brown fox jumps over the lazy dog
Secondary Text (14px)The quick brown fox jumps over the lazy dog
Footnote / Caption (12px)The quick brown fox jumps over the lazy dog
Technical Specification & Mathematical Principles
Evaluates relative luminance ratio (L1 + 0.05) / (L2 + 0.05) against W3C Guideline 1.4.3:
- Body Text Level AA:
≥ 4.5:1(Normal text under 18pt) - Large Heading Level AA:
≥ 3.0:1(Text 18pt+ or 14pt+ bold) - Body Text Level AAA:
≥ 7.0:1(Enhanced contrast)
Frequently Asked Questions
Headings use larger stroke widths and bigger spatial dimensions. Human visual photoreceptors distinguish large bold shapes more easily than thin, compact body letters, allowing WCAG to lower the threshold to 3:1 for large text.
Related Design & Color Instruments
WCAG Contrast Checker
Calculate W3C relative luminance and contrast ratio (L1+0.05)/(L2+0.05) with AA/AAA compliance ratings.
Open Tool
Color Blindness Simulator
Simulate Protanopia, Deuteranopia, Tritanopia, and Achromatopsia on colors and uploaded UI screenshots via 3x3 matrices.
Open Tool
APCA Contrast Calculator
Calculate readability contrast using WCAG 3.0 Accessible Perceptual Contrast Algorithm (APCA) Lc scores.
Open Tool
Image Color Picker
Extract pixel colors from your images with pixel-level precision and an interactive magnifying loupe. Runs 100% locally in your browser.
Open Tool