Operationel

Farvekontrastkontrol

Reklame

Preview

Normal Text (16px)

Large Text (24px)

Contrast Ratio

21.00:1

WCAG Compliance

Normal Text

AA Pass
AAA Pass

Large Text (18pt+ or 14pt+ bold)

AA Pass
AAA Pass

UI Components & Graphics

AA Pass

WCAG Standards

Normal Text

  • AA: 4.5:1 minimum
  • AAA: 7:1 minimum

Large Text

  • AA: 3:1 minimum
  • AAA: 4.5:1 minimum

UI Components

  • AA: 3:1 minimum

Common Combinations

Black on White
White on Blue
White on Dark Gray
Indtast dine farvekombinationer nedenfor for at teste dem med vores farvekontrastkontrol og se med det samme, om de opfylder tilgængelighedsstandarderne.
Reklame

Sådan fungerer vores farvekontrastkontroller

Indtast dine forgrunds- og baggrundsfarver med RGB-hex-værdier, eller vælg dem direkte med Color Picker.

 Du kan:

  • Juster Alpha for at ændre, hvor gennemsigtig forgrundsfarven er.
  • Brug lyshedsskyderen for at få farven til at se lysere eller mørkere ud.

Vores værktøj beregner derefter kontrastforholdet og tjekker det mod WCAG-retningslinjerne:

  • WCAG 2.0 Niveau AA
  • Mindst 4,5:1 for normal teksttekst
  • Mindst 3:1 for store tekster
  • WCAG 2.1 (UI & grafik)
  • Mindst 3:1 for ikoner, kanter og andre interfacekomponenter
  • WCAG Level AAA
  • Mindst 7:1 for almindelig tekst
  • Mindst 4,5:1 for stor tekst

Stor tekst betyder enten:

  • 14 point (ca. 18,66 px) og fed, eller
  • 18 point (omtrent px) eller større

Du kan bruge pipettelen i farvevælgeren til at hente præcise farver fra alt på din skærm. Det gør det nemt at teste rigtige designs, knapper eller baggrunde.

For links, der kun bruger farve for at skille sig ud, brug vores farvekontrasttjekker for at sikre, at de opfylder tilgængelighedsstandarder og forbliver lette at læse for alle.

 
 

API-dokumentation kommer snart

Documentation for this tool is being prepared. Please check back later or visit our full API documentation.