WCAG 2.1 och 2.2 som tillgänglighetsstandard
Web Content Accessibility Guidelines (WCAG) version 2.1 och 2.2 utgör den nuvarande standarden för digital tillgänglighet. Att uppfylla dessa riktlinjer är avgörande för att säkerställa att digitalt innehåll kan läsas och användas av personer med nedsatt syn eller färgblindhet. En central del i detta arbete är att kontrollera kontrastförhållandet mellan text och dess bakgrund.
Verktyget använder formeln för WCAG 2.1 / 2.2 för att beräkna det exakta kontrastförhållandet. Genom att systematiskt kontrollera färgkombinationer kan designers säkerställa läsbarheten på text och komponenter, utvecklare kan garantera att tekniska tillgänglighetskrav uppfylls, och innehållsskapare kan verifiera att deras material är tillgängligt för alla.
Kontrastförhållandet och dess gränsvärden
Kontrastförhållandet mäts på en skala som sträcker sig från 1:1 till 21:1. Ett förhållande på 1:1 innebär att det inte finns någon kontrast alls (till exempel vit text på vit bakgrund), medan 21:1 representerar den maximala kontrasten med svart text på vit bakgrund.
Verktyget startar med standardfärgerna #4f46e5 för textfärg och #ffffff för bakgrundsfärg, vilket ger ett kontrastförhållande på 6.29:1.
För att uppnå de olika tillgänglighetsnivåerna krävs specifika tröskelvärden:
| Kategori | AA-nivå | AAA-nivå |
|---|---|---|
| Normal text | Minst 4.5:1 | Minst 7:1 |
| Stor text | Minst 3:1 | Minst 4.5:1 |
| Gränssnitt & grafik | Minst 3:1 (enkel tröskel) | Minst 3:1 (enkel tröskel) |
För raden Gränssnitt & grafik tillämpas ett fast gränsvärde på 3:1. Denna kategori har ingen uppdelning mellan AA och AAA, utan verktyget visar ett enda resultat för denna rad.
Definitioner av textstorlekar och komponenter
Inom tillgänglighetsstandarden görs en tydlig distinktion mellan normal text och stor text, eftersom större tecken är lättare att urskilja även vid lägre kontrast.
- Stor text: Definieras som text som är minst 18pt (vilket motsvarar ungefär 24px), eller minst 14pt (ungefär 18.5px) om texten är fetstilt.
- Normal text: All text som faller under måtten för stor text.
- Gränssnitt & grafik: Avser visuella element som UI-komponenter och grafiska objekt som krävs för att förstå innehållet eller använda gränssnittet.
Hantering av färgformat och inmatning
Verktyget accepterar tre vanliga färgformat för både textfärg och bakgrundsfärg:
- Hex-värden: Till exempel
#1a1a1a. - RGB-värden: Till exempel
rgb(26, 26, 26). - HSL-värden.
Om ett ogiltigt färgformat skrivs in i fältet för textfärg visas felmeddelandet: "Ange en giltig textfärg, som #1a1a1a or rgb(26, 26, 26).". Om ett ogiltigt färgformat skrivs in i fältet för bakgrundsfärg visas felmeddelandet: "Ange en giltig bakgrundsfärg, som #ffffff eller rgb(255, 255, 255).".
Verktyget är utrustat med en växlingsknapp som gör det möjligt att snabbt skifta plats på textfärgen och bakgrundsfärgen.
Tolkning av resultat och sammanfattningar
När färgerna har analyserats visar verktyget om kombinationen är "Godkänd" eller "Underkänd" för respektive kategori. Dessutom genereras ett sammanfattande omdöme baserat på de högsta uppnådda nivåerna:
- Klarar AA och AAA för normal text. – Visas när färgkombinationen uppfyller de strängaste kraven för alla textstorlekar.
- Klarar AA för normal text. – Visas när kontrasten är tillräcklig för vanlig text på AA-nivå, men inte når upp till AAA för normal text.
- Klarar AA endast för stor text. – Visas när kontrasten ligger mellan 3:1 och 4.5:1, vilket innebär att endast stor text uppfyller tillgänglighetskraven.
- Under AA-minimum – öka kontrasten. – Visas när kontrastförhållandet faller under 3:1 och därmed inte uppfyller minimikraven för tillgänglighet.
Lokal databehandling och integritet
När du använder denna kontrastkontroll sker all beräkning och bearbetning lokalt direkt i din webbläsare. Inga färgkoder, textsträngar eller andra data som du skriver in laddas upp till BroBroGo.
Vanliga frågor
Vad betyder resultaten för AA och AAA?
AA är den nivå de flesta webbplatser siktar på: den kräver ett kontrastförhållande på minst 4.5:1 för normal text och 3:1 för stor text. AAA är strängare – 7:1 för normal text och 4.5:1 för stor text. Kontrastförhållandet sträcker sig från 1:1 (ingen kontrast) till 21:1 (svart på vitt).
Vad räknas som stor text?
Text från 18pt (ca 24px), eller 14pt (ca 18.5px) om den är fetstilt. Större text är lättare att läsa med lägre kontrast, så den blir godkänd för AA vid 3:1 och AAA vid 4.5:1 istället för de strängare gränserna för normal text.
Vilka färgformat kan jag skriva in?
Skriv in ett hex-värde som #1a1a1a, ett rgb()-värde som rgb(26, 26, 26) eller ett hsl()-värde – eller klicka på färgproverna för att välja en färg. Använd växlingsknappen för att skifta text- och bakgrundsfärg.
Är detta WCAG 2 eller den nyare APCA-metoden?
Den använder formeln för WCAG 2.1 / 2.2, vilket är den som tillgänglighetsregler och granskningar utgår från idag. APCA är en nyare, mer perceptuell metod som fortfarande utvecklas för WCAG 3 – lovande, men ännu inte en officiell standard, så godkänd-resultaten här använder den inte.