Contrast Thresholds

The Contrast Thresholds resource provides authoritative contrast ratio requirements for both WCAG 2.1 (current standard) and APCA (proposed for WCAG 3.0), supporting text, large text, and non-text UI elements.

URI Patterns

contrast://thresholds/wcag21

static

WCAG 2.1 contrast ratio requirements (4.5:1, 3:1, 7:1, etc.)

contrast://thresholds/apca

static

APCA (Accessible Perceptual Contrast Algorithm) lightness thresholds

contrast://algorithms

static

List of supported contrast algorithms with descriptions

WCAG 2.1 Thresholds

URI

contrast://thresholds/wcag21

Response Schema

AA_NORMAL

object

required

Requirements for normal text at Level AA

Show Properties

ratio

number

Minimum contrast ratio (4.5)

description

string

Applicable text sizes (< 18pt or < 14pt bold)

AA_LARGE

object

required

Requirements for large text at Level AA

Show Properties

ratio

number

Minimum contrast ratio (3.0)

description

string

Applicable text sizes (>= 18pt or >= 14pt bold)

AAA_NORMAL

object

required

Enhanced contrast for normal text at Level AAA

Show Properties

ratio

number

Minimum contrast ratio (7.0)

description

string

Enhanced contrast for normal text

AAA_LARGE

object

required

Enhanced contrast for large text at Level AAA

Show Properties

ratio

number

Minimum contrast ratio (4.5)

description

string

Enhanced contrast for large text

NON_TEXT

object

required

Requirements for UI components and graphical objects

Show Properties

ratio

number

Minimum contrast ratio (3.0)

description

string

UI components and graphical objects (WCAG 1.4.11)

Example Response

{
  "AA_NORMAL": {
    "ratio": 4.5,
    "description": "Texto normal (< 18pt o < 14pt negrita)"
  },
  "AA_LARGE": {
    "ratio": 3.0,
    "description": "Texto grande (>= 18pt o >= 14pt negrita)"
  },
  "AAA_NORMAL": {
    "ratio": 7.0,
    "description": "Contraste mejorado para texto normal"
  },
  "AAA_LARGE": {
    "ratio": 4.5,
    "description": "Contraste mejorado para texto grande"
  },
  "NON_TEXT": {
    "ratio": 3.0,
    "description": "Componentes de UI y objetos gráficos"
  }
}

Quick Reference Table

Level	Text Size	Required Ratio	WCAG Criterion
AA	Normal (< 18pt)	4.5:1	1.4.3
AA	Large (≥ 18pt)	3:1	1.4.3
AA	Non-text (UI)	3:1	1.4.11
AAA	Normal (< 18pt)	7:1	1.4.6
AAA	Large (≥ 18pt)	4.5:1	1.4.6

What is “Large Text”?

Large text is defined as:

18pt or larger (24px at default browser settings)
14pt bold or larger (18.5px bold at default settings)

APCA Thresholds

URI

contrast://thresholds/apca

Response Schema

BODY_TEXT

object

required

Requirements for body text (fluent reading)

Show Properties

ratio

number

Minimum Lightness Contrast (75)

description

string

Body text use cases

LARGE_TEXT

object

required

Requirements for large text (headings, titles)

Show Properties

ratio

number

Minimum Lightness Contrast (60)

description

string

Large text use cases

NON_TEXT

object

required

Requirements for non-text elements

Show Properties

ratio

number

Minimum Lightness Contrast (45)

description

string

Non-text use cases (icons, borders, etc.)

Example Response

{
  "BODY_TEXT": {
    "ratio": 75,
    "description": "Texto de cuerpo (lectura fluida)"
  },
  "LARGE_TEXT": {
    "ratio": 60,
    "description": "Texto grande (encabezados, títulos)"
  },
  "NON_TEXT": {
    "ratio": 45,
    "description": "Elementos no textuales (iconos, bordes)"
  }
}

Quick Reference Table

Use Case	Minimum Lc	Examples
Body text	75 Lc	Paragraphs, articles, content
Large text	60 Lc	Headings, titles, hero text
Non-text	45 Lc	Icons, borders, focus rings
Placeholder	60 Lc	Input placeholders
Disabled	30 Lc	Disabled states (informational)

APCA uses Lightness Contrast (Lc) instead of contrast ratios. Higher Lc values indicate better contrast. APCA is proposed for WCAG 3.0 but is not yet an official standard.

Contrast Algorithms

URI

contrast://algorithms

Response Schema

Returns an array of algorithm information objects:

string

required

Algorithm identifier: "WCAG21" or "APCA"

name

string

required

Human-readable algorithm name

description

string

required

Detailed explanation of the algorithm

standard

string

required

Associated standard or specification

thresholdUri

string

required

URI to fetch threshold data for this algorithm

Example Response

[
  {
    "id": "WCAG21",
    "name": "WCAG 2.1 Contrast Ratio",
    "description": "Algoritmo estándar de ratio de contraste definido en WCAG 2.1. Calcula la relación de luminancia relativa entre dos colores.",
    "standard": "WCAG 2.1 Success Criterion 1.4.3 / 1.4.6",
    "thresholdUri": "contrast://thresholds/wcag21"
  },
  {
    "id": "APCA",
    "name": "Advanced Perceptual Contrast Algorithm",
    "description": "Algoritmo avanzado que considera la percepción visual humana de manera más precisa. Propuesto para WCAG 3.0, tiene en cuenta la polaridad del texto y el tamaño.",
    "standard": "WCAG 3.0 (Draft)",
    "thresholdUri": "contrast://thresholds/apca"
  }
]

WCAG 2.1 vs APCA Comparison

Aspect	WCAG 2.1	APCA
Measurement	Luminance ratio (e.g., 4.5:1)	Lightness Contrast (Lc)
Formula	`(L1 + 0.05) / (L2 + 0.05)`	Complex perceptual model
Polarity	Same result either way	Different for dark-on-light vs light-on-dark
Accuracy	Good approximation	More perceptually accurate
Status	W3C Recommendation (current)	Draft (WCAG 3.0 proposal)
Legal standing	Widely adopted in regulations	Not yet official
Use case	Compliance, legal requirements	Design optimization, future-proofing

When to Use Each

Use WCAG 2.1 for compliance

Required for:

Legal compliance (ADA, Section 508, European Accessibility Act)
Regulatory audits
Official WCAG 2.1 conformance claims

const result = await client.readResource({ 
  uri: 'contrast://thresholds/wcag21' 
});
const thresholds = JSON.parse(result.contents[0].text);
// Use thresholds.AA_NORMAL.ratio for compliance checks

Use APCA for design optimization

Best for:

Fine-tuning color palettes
Dark mode optimization (polarity-aware)
Future-proofing designs for WCAG 3.0
More accurate perceptual contrast

const result = await client.readResource({ 
  uri: 'contrast://thresholds/apca' 
});
const thresholds = JSON.parse(result.contents[0].text);
// Use thresholds.BODY_TEXT.ratio for design decisions

Test both for comprehensive analysis

Recommended approach:

Use WCAG 2.1 as the compliance baseline
Use APCA to identify perceptual issues WCAG 2.1 might miss
Report both results for full transparency

const wcag21 = await client.readResource({ uri: 'contrast://thresholds/wcag21' });
const apca = await client.readResource({ uri: 'contrast://thresholds/apca' });

// Compare results from both algorithms

Usage Examples

Check WCAG AA Requirements

const result = await client.readResource({ 
  uri: 'contrast://thresholds/wcag21' 
});

const thresholds = JSON.parse(result.contents[0].text);

console.log('WCAG AA Requirements:');
console.log(`Normal text: ${thresholds.AA_NORMAL.ratio}:1`);
console.log(`Large text: ${thresholds.AA_LARGE.ratio}:1`);
console.log(`UI components: ${thresholds.NON_TEXT.ratio}:1`);

Output:

WCAG AA Requirements:
Normal text: 4.5:1
Large text: 3:1
UI components: 3:1

Check APCA Requirements

const result = await client.readResource({ 
  uri: 'contrast://thresholds/apca' 
});

const thresholds = JSON.parse(result.contents[0].text);

console.log('APCA Requirements:');
console.log(`Body text: ${thresholds.BODY_TEXT.ratio} Lc`);
console.log(`Headings: ${thresholds.LARGE_TEXT.ratio} Lc`);
console.log(`Icons: ${thresholds.NON_TEXT.ratio} Lc`);

Output:

APCA Requirements:
Body text: 75 Lc
Headings: 60 Lc
Icons: 45 Lc

Compare Algorithms

const result = await client.readResource({ 
  uri: 'contrast://algorithms' 
});

const algorithms = JSON.parse(result.contents[0].text);

algorithms.forEach(algo => {
  console.log(`${algo.name}:`);
  console.log(`  Status: ${algo.standard}`);
  console.log(`  Thresholds: ${algo.thresholdUri}`);
  console.log();
});

Validate Contrast Ratio

const thresholdsResult = await client.readResource({ 
  uri: 'contrast://thresholds/wcag21' 
});
const thresholds = JSON.parse(thresholdsResult.contents[0].text);

const measuredRatio = 4.8; // From contrast analysis
const isNormalText = true;
const targetLevel = 'AA';

const required = isNormalText 
  ? thresholds.AA_NORMAL.ratio 
  : thresholds.AA_LARGE.ratio;

if (measuredRatio >= required) {
  console.log(`✓ Passes WCAG ${targetLevel} (${measuredRatio}:1 >= ${required}:1)`);
} else {
  console.log(`✗ Fails WCAG ${targetLevel} (${measuredRatio}:1 < ${required}:1)`);
}

Integration with Tools

The analyze-contrast tool uses these thresholds automatically:

// Tool automatically references WCAG 2.1 thresholds
const analysis = await analyzeContrast('https://example.com', {
  contrastAlgorithm: 'WCAG21',
  wcagLevel: 'AA'
});

// For APCA analysis:
const apcaAnalysis = await analyzeContrast('https://example.com', {
  contrastAlgorithm: 'APCA'
});

The resource provides the reference values that the tool uses for pass/fail determination.

WCAG Criteria

Full details on criteria 1.4.3, 1.4.6, and 1.4.11

Contrast Tool

Automated contrast analysis using these thresholds

Contrast Prompt

Guided workflow for contrast checking

Lighthouse Audits

Lighthouse’s color-contrast audit mapping

Standards Reference

This resource is based on:

WCAG 2.1: Success Criterion 1.4.3 Contrast (Minimum)
WCAG 2.1: Success Criterion 1.4.6 Contrast (Enhanced)
WCAG 2.1: Success Criterion 1.4.11 Non-text Contrast
APCA: WCAG 3.0 Draft Specification

APCA is part of the WCAG 3.0 draft and is not yet an official W3C standard. Use it for design optimization, but rely on WCAG 2.1 for legal compliance.

Overview

Reference Data

URI Patterns

WCAG 2.1 Thresholds

URI

Response Schema

Example Response

Quick Reference Table

What is “Large Text”?

APCA Thresholds

URI

Response Schema

Example Response

Quick Reference Table

Contrast Algorithms

URI

Response Schema

Example Response

WCAG 2.1 vs APCA Comparison

When to Use Each

Usage Examples

Check WCAG AA Requirements

Check APCA Requirements

Compare Algorithms

Validate Contrast Ratio

Integration with Tools

WCAG Criteria

Contrast Tool

Contrast Prompt

Lighthouse Audits

Standards Reference

Build docs developers (and LLMs) love

Overview

Reference Data

​URI Patterns

​WCAG 2.1 Thresholds

​URI

​Response Schema

​Example Response

​Quick Reference Table

​What is “Large Text”?

​APCA Thresholds

​URI

​Response Schema

​Example Response

​Quick Reference Table

​Contrast Algorithms

​URI

​Response Schema

​Example Response

​WCAG 2.1 vs APCA Comparison

​When to Use Each

​Usage Examples

​Check WCAG AA Requirements

​Check APCA Requirements

​Compare Algorithms

​Validate Contrast Ratio

​Integration with Tools

​Related Resources

WCAG Criteria

Contrast Tool

Contrast Prompt

Lighthouse Audits

​Standards Reference

Build docs developers (and LLMs) love

URI Patterns

WCAG 2.1 Thresholds

URI

Response Schema

Example Response

Quick Reference Table

What is “Large Text”?

APCA Thresholds

URI

Response Schema

Example Response

Quick Reference Table

Contrast Algorithms

URI

Response Schema

Example Response

WCAG 2.1 vs APCA Comparison

When to Use Each

Usage Examples

Check WCAG AA Requirements

Check APCA Requirements

Compare Algorithms

Validate Contrast Ratio

Integration with Tools

Related Resources

Standards Reference