#736CBE op #000000: 4.61:1

#736CBE op #000000: contrastverhouding 4.61:1 en APCA Lc -30. WCAG 2.2 AA- en AAA-resultaten voor normale tekst, grote tekst en UI, plus de dichtstbijzijnde toegankelijke tekst- of achtergrondkleur via OKLCH-helderheid.

Voorbeeld

Voorbeeld van een grote kop

Pa's wijze lynx bezag vroom het fikse aquaduct

#736CBE op #000000

Tekst en achtergrond omwisselen →

WCAG 2.2-contrastverhouding: 4.61:1

WCAG 2.2 gebruikt dezelfde contrastformule als 2.1. Verhoudingen worden afgekapt op twee decimalen, nooit naar boven afgerond.

TeksttypeAAAAA
Normale tekst✓ Voldoet✗ Voldoet niet
Grote tekst (24 px of meer, of 18,66 px vet)✓ Voldoet✓ Voldoet
UI-componenten en afbeeldingen✓ Voldoetn.v.t.

APCA-helderheidscontrast: Lc -30

Lc -30. Lopende tekst vraagt ongeveer Lc 75+, grote tekst en UI ongeveer Lc 45+. Positief is donkere tekst op lichte achtergrond, negatief is lichte tekst op donker.

Correcties via OKLCH-helderheid

De correctie behoudt tint en chroma en verschuift alleen de OKLCH-helderheid naar de dichtstbijzijnde stap die het doel voor normale tekst haalt, zodat het dezelfde kleur blijft. Het is dezelfde logica als de Fix-knop in de studio.

Tekstkleur corrigeren

  • Voldoet al aan AA, geen wijziging nodig.
  • AAA: #9691E6 → 7.48:1

    oklch(0.695 0.124 285.7) · ΔL +0.12

    #9691E6 op #000000 →

Achtergrond corrigeren

  • Voldoet al aan AA, geen wijziging nodig.
  • Geen helderheid van deze kleur haalt AAA tegen de andere kleur. Pas tint of chroma aan, of kies een andere kleur.

#736CBE = oklch(0.575 0.124 285.7) · #000000 = oklch(0.000 0.000 0.0)

Dit paar openen in de contrasttool