WCAG Contrast Calculator

WCAG 2.1 + APCA contrast with multi-format input, detailed breakdown, auto-suggestion and live preview

Calculate WCAG 2.1 and APCA (WCAG 3.0) contrast between two colors. Accepts HEX, RGB, HSL, OKLCH, LAB and CSS names. Detailed AA/AAA breakdown, auto-suggest accessible color and live preview with UI components.

Quick Pairs

Colors

Text Color

Background Color

WCAG 2.1 Contrast Ratio

14.89

AAA

WCAG 2.1 Breakdown

Normal Text AA✓ Pass

Normal Text AAA✓ Pass

Large Text AA✓ Pass

Large Text AAA✓ Pass

UI Components✓ Pass

APCA (WCAG 3.0)

Lc +95.7

Excellent readability

Live Preview

Font Size: 16px

Weight

Heading Example

This is how your text will look with the selected colors. Good contrast ensures readability for all users, including those with visual impairments.

Secondary text with reduced opacity

Link example →

Checkbox

Radio

How it works

This tool calculates color contrast using two standards: WCAG 2.1 (current) and APCA (WCAG 3.0) (upcoming). It accepts colors in any format (HEX, RGB, HSL, OKLCH, LAB, CSS names) and displays each color in 5 formats simultaneously.

Tool Features

Multi-format input: Type HEX, RGB, HSL, OKLCH, LAB or CSS names (e.g. "steelblue")
Multi-format display: Each color shown in HEX, RGB, HSL, OKLCH and LAB with individual copy
WCAG 2.1 breakdown: Individual badges for Normal Text AA/AAA, Large Text AA/AAA and UI Components
APCA (WCAG 3.0): Lc score with readability interpretation
Auto-suggestion: When contrast fails, suggests the closest color that passes AA
Live preview: Headings, paragraphs, buttons, links, checkboxes, radios and toggles
Quick pairs: 6 predefined combinations for fast testing
Color swap: Switch text/background with one click

WCAG 2.1 vs APCA (WCAG 3.0)

WCAG 2.1: Simple ratio (4.5:1 for AA, 7:1 for AAA). Doesn't consider font size or weight.
APCA: Advanced algorithm producing an Lc value. Considers contrast direction (text on bg vs bg on text). Lc ≥60 = good for text, Lc ≥75 = excellent.

WCAG 2.1 Conformance Levels

Level AA: 4.5:1 for normal text, 3:1 for large text (≥24px or ≥18.5px bold)
Level AAA: 7:1 for normal text, 4.5:1 for large text
UI Components: 3:1 for icons, borders, focus states

💡 Practical Examples

Case 1: CTA button with auto-suggestion

Your orange button #FF6B35 with white text has a 3.2:1 ratio. The tool automatically suggests a darker orange that passes AA.

Case 2: Verify with OKLCH

Paste oklch(0.55 0.15 265) directly in the input and the tool converts it automatically. You'll see the HEX, RGB, HSL and LAB equivalents instantly.

Case 3: UI component preview

The preview shows headings, paragraphs, primary/secondary buttons, links, checkboxes, radios and toggles — all with your colors. Adjust font size and weight to see how it affects readability.

Frequently Asked Questions

What contrast ratio do I need for my website?

WCAG 2.1 AA (minimum recommended): 4.5:1 for normal text, 3:1 for large text. AAA (optimal): 7:1 for normal text. For APCA (WCAG 3.0): Lc ≥60 for body text, Lc ≥75 for excellent readability.

What color formats can I use as input?

You can type HEX (#FF6B35), RGB (rgb(255,107,53)), HSL (hsl(20,100%,60%)), CSS names (steelblue, coral, etc.) or any CSS-recognized format. The tool detects and converts automatically.

What is APCA and how does it differ from WCAG 2.1?

APCA (Advanced Perceptual Contrast Algorithm) is the proposed algorithm for WCAG 3.0. Unlike WCAG 2.1, it considers contrast direction and is more perceptually accurate. It produces an Lc value instead of a simple ratio.

What does the "auto-suggestion" do?

When your color combination fails WCAG AA (4.5:1), the tool automatically finds the closest text color to yours that does pass. You can apply it with one click.

Does contrast only apply to text?

No. WCAG 2.1 also requires 3:1 for UI components (icons, input borders, focus states). Our tool includes a specific "UI Components" badge in the breakdown.

Is WCAG compliance mandatory?

In many countries it's a legal requirement for government sites and businesses. In the EU, the Web Accessibility Directive mandates it. It also improves user experience for everyone.