Kontrastförhållande
Se även: color contrast
Luminansförhållandet mellan förgrundtext och bakgrund, på en skala från 1:1 till 21:1. WCAG 2.x kräver 4,5:1 för normal text och 3:1 för stor text (≥18pt eller 14pt fet) på nivå AA.
Kontrastförhållandet mäter den perceptuella skillnaden i luminans mellan två färger — vanligtvis text och dess bakgrund. Skalan går från 1:1 (ingen kontrast alls — vitt på vitt) till 21:1 (rent svart på rent vitt). WCAG definierar minimumförhållanden för textläsbarhet.
WCAG:s tröskelvärden
WCAG 2.x framgångskriterier 1.4.3 (Kontrastminimum, nivå AA) och 1.4.6 (Förstärkt kontrast, nivå AAA) fastställer dessa golv:
| Texttyp | AA | AAA |
|---|---|---|
| Normal text (< 18pt eller < 14pt fet) | 4,5:1 | 7:1 |
| Stor text (≥ 18pt, eller ≥ 14pt fet) | 3:1 | 4,5:1 |
| Grafiska objekt + UI-komponenter (1.4.11) | 3:1 | — |
WCAG 2.x mäter kontrast med WCAG-formeln (ett luminansbaserat förhållande). WCAG 3 undersöker en perceptuellt jämn ersättning (“APCA” — Accessible Perceptual Contrast Algorithm) som fungerar annorlunda för mycket mörka eller mycket ljusa bakgrunder; APCA är ännu inte normativ.
Vad som missas
Kontrast är en av de få WCAG-regler som ett verktyg kan detektera med säkerhet, så automatiserade skannrar fångar de flesta rena text-mot-bakgrund-brister. Vad som ändå slinker igenom:
- Platshållartext i inmatningsfält. Ofta #999 eller ljusare på vitt — underkänt
AA. Designers väljer lågkontrastplatshållare för att skilja dem från ifyllt
värde, men bästa praxis är att använda en separat
<label>ovanför fältet och en platshållare med tillräcklig kontrast (eller ingen alls). - Hover- och fokustillstånd. En knapp med tillräcklig standardkontrast kan misslyckas vid hover (t.ex. ett ljusgrått hovertillstånd på vitt). Granska interaktiva element i varje visuellt tillstånd.
- Inaktiverade kontroller. Inaktiverade kontroller är formellt undantagna från
AA-kontrast, men att enbart gråa ut dem med låg kontrast ger
personer med nedsatt färgseende inget sätt att veta att kontrollen är inaktiv.
Kombinera färg med en annan signal — en ikon, en labeländring, eller
aria-disabledså att skärmläsare meddelar det. - Text över bilder och gradienter. Hjälteöverlägg där samma text löper över både en ljus och en mörk del av bakgrundsbilden misslyckas ofta i den ljusare regionen.
- Ikoner som enda etikett. En 24-pixelikon utan text behöver 3:1 mot sin bakgrund (1.4.11), och ikonens meningsfulla pixlar — konturerna — är vad som mäts.
Operativ testning
Tre arbetsflöden minskar kontrastfel tidigt:
- Linting i designfasen. Stark, Able och Adobe XD:s tillgänglighetskontroll beräknar kontrast i designverktyget. Åtgärda det innan koden skrivs.
- Tokeniserade paletter. Definiera varje text/bakgrunds-par som en token vars kontrast kontrolleras en gång. Förbjud ad hoc-färgvärden på textbärande komponenter.
- Automatiserade CI-kontroller. axe-core, Pa11y eller Lighthouse avbryter byggen vid kontrastbrister. Billigt att lägga till, dyrt att hoppa över.
Bortom golvet
4,5:1 är ett minimum, inte ett estetiskt mål. Användare med mild färgsynsnedsättning, åldersrelaterad synförsämring eller lågkvalitativa skärmar föredrar 7:1 eller högre för brödtext. En webbplats som precis klarar AA på varje element upplevs generellt som lågkontrast även av användare utan formella funktionsnedsättningar.