Färgkontrastkontroll
Kontrollera kontrasten mellan en textfärg och en bakgrundsfärg mot WCAG 2 och APCA. Kontrollverktyget beräknar kontrastförhållandet enligt WCAG 2 utifrån relativ luminans, anger godkänt eller underkänt för AA och AAA för normal och stor text samt för UI grafik, och visar APCA-värdet för ljushetskontrast med vägledning om vad värdet passar för. Utformat för designers och utvecklare som bygger tillgängliga gränssnitt.
Vanliga frågor
Vad betyder WCAG-nivåerna?
Nivå AA kräver 4.5:1 för normal text och 3:1 för stor text (framgångskriterium 1.4.3); nivå AAA kräver 7:1 och 4.5:1 (1.4.6). Komponenter i användargränssnitt och meningsbärande grafik behöver 3:1 mot intilliggande färger (1.4.11). Kontrollverktyget anger godkänt eller underkänt för vart och ett av dessa fem tröskelvärden.
Vad räknas som stor text?
WCAG definierar stor text som minst 18 punkter i normal stil, cirka 24 CSS pixlar, eller minst 14 punkter i fetstil, cirka 18.66 CSS pixlar. Allt mindre räknas som normal text och behöver ett högre kontrastförhållande.
Varför underkänns ett förhållande på 4.499:1 enligt AA?
WCAG:s tröskelvärden är exakta, så ett förhållande som skulle avrundas till 4.5 men ligger under det blir inte godkänt. Kontrollverktyget jämför det oavrundade förhållandet och visar det med två decimaler utan avrundning, så det visade talet aldrig ser bättre ut än det verkliga.
Vad är APCA?
Accessible Perceptual Contrast Algorithm är en kontrastmetod som utvecklats för utkasten till WCAG 3. Den modellerar upplevd ljushetskontrast, behandlar text och bakgrund olika och ger ett värde för ljushetskontrast, Lc, från cirka -108 till 106. Metoden ingår ännu inte i någon publicerad WCAG-standard, så använd resultaten enligt WCAG 2 för att kontrollera efterlevnad och APCA som en extra kontroll.
Varför är APCA-värdet ibland negativt?
APCA tar hänsyn till polariteten: positiva värden betyder mörk text på ljus bakgrund, negativa värden betyder ljus text på mörk bakgrund. Vägledningen använder absolutvärdet, så Lc -75 och Lc 75 hamnar på samma nivå.
Hur väljs APCA-vägledningens nivåer?
De följer APCA:s enkla bronssystem: Lc 90 rekommenderas för brödtext, Lc 75 är lägstanivån för brödtext, Lc 60 för annan innehållstext, Lc 45 för rubriker och stor text, Lc 30 för text som bara behöver kunna läsas tillfälligt, till exempel platshållare, och Lc 15 för element som inte är text. Teckenstorlek och vikt spelar fortfarande roll, så se nivåerna som utgångspunkter snarare än ett slutgiltigt besked.
Vilken APCA-version används?
APCA-W3-konstanterna från version 0.0.98 G, revision 4g, med den enkla exponenten 2.4 för sRGB-kanalerna, mjuk begränsning av svartnivån och klippning vid låg kontrast. Svart text på vitt ger cirka Lc 106.0 och vit text på svart cirka Lc -107.9, vilket stämmer med referensimplementeringen.
Vilka färgformat kan jag ange?
Hexkoder med eller utan #, CSS färgnamn, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color()-färgrymder som display-p3 och cmyk(). Färger utanför sRGB omvandlas först till sRGB, eftersom båda formlerna är definierade för sRGB-skärmfärger.
Hur hanteras genomskinliga färger?
En halvgenomskinlig textfärg blandas med bakgrunden före mätningen, så som en webbläsare återger den. En halvgenomskinlig bakgrund blandas först med vitt. Resultatet visar de ogenomskinliga text- och bakgrundsfärger som faktiskt jämfördes.
Spelar ordningen mellan de två färgerna någon roll?
För WCAG 2 spelar den ingen roll, eftersom förhållandet mellan den ljusare och den mörkare luminansen är detsamma oavsett ordning. För APCA spelar den roll, eftersom text och bakgrund viktas olika. Ange därför textfärgen i det första fältet och bakgrundsfärgen i det andra.