What is 18pt in pixels on the web?

At 96 DPI CSS reference resolution, 1pt = 1.333px, so 18pt equals exactly 24px, and 14pt equals 18.66px.

Does 3:1 contrast apply to buttons?

Yes, button labels qualifying as large text need 3:1, but standard 16px button text requires 4.5:1.

Can I use gradient text with this tool?

Test the lowest-contrast color stop of your gradient against the background to guarantee full compliance.

Accessibility & A11y Tools• 3:1 Threshold

Large Text Contrast Checker & Headline Validator

WCAG recognizes that larger, heavier text is significantly easier to distinguish. Validate your display typography and marketing banners against the 3:1 Level AA and 4.5:1 Level AAA thresholds.

Calculations run client-side. Zero telemetry.

Color Controls

Foreground (Text / Element)

Background Surface

Calculated Ratio

13.98: 1

AA Normal Text

PASS (4.5:1)

AA Large Text (18pt+)

PASS (3.0:1)

AAA Normal Text

PASS (7.0:1)

UI & Icons (SC 1.4.11)

PASS (3.0:1)

Accessible Typography & UI Preview

This interactive box previews your selected foreground and background colors in real time. Good visual contrast ensures your content remains effortless to read for all visitors, including those in high-glare environments.

Sponsored PlacementGoogle AdSense Integration Ready

How to Use Large Text Contrast Checker

Define Typography

Set text size (pt/px) and weight (regular 400 or bold 700+).

Input Palette

Choose text and background colors.

Review Compliance

Verify whether the 3:1 large-text AA threshold or 4.5:1 AAA threshold is satisfied.

About Large Text Contrast Checker

Evaluates relative luminance L1 and L2 using WCAG 2.1 formulas, automatically adjusting threshold requirements depending on whether font size and weight meet the large-text specification.

Supported Formats

HEXRGB

Operational Limits

•Text under 18pt regular or 14pt bold requires 4.5:1 for Level AA.

Key Features

Automatic detection of large-text qualifying criteria (>=18pt or >=14pt bold)
Interactive font size and font weight testing slider
Live preview with customizable sample headlines
Instant pass/fail badge for Level AA and Level AAA
Copy CSS color rules

Frequently Asked Questions

Because larger visual stroke widths provide higher spatial frequency recognition on the retina, requiring less luminance difference to read.

Related Tools

WCAG Color Contrast Checker

Calculate foreground and background color contrast ratios in real time with WCAG 2.1 Level AA and AAA pass/fail compliance indicators.

Accessibility & A11y ToolsOpen Tool

SC 1.4.11 Local

UI Component Contrast Validator

Validate WCAG 2.1 Success Criterion 1.4.11 for non-text UI elements: form input borders, button outlines, icons, and focus rings.

Accessibility & A11y ToolsOpen Tool

Typographic Scale Local

Modular Scale Calculator

Generate harmonious typographic scale steps from a base size and musical or mathematical ratio with ready-to-use CSS variables.

Font & Typography ToolsOpen Tool