Färgkontrastkontroll: WCAG AA- och AAA-kvot – Gratis
Gratis, ingen registrering, fungerar i din webbläsare. Ange text- och bakgrundsfärg för att se WCAG-kvoten och om AA och AAA godkänns. Vid underkänt föreslås en närmast godkänd färg.
Stor text ser ut så här
Vanlig brödtext ser ut så här. Ett kvickt brunt rävhopp över en lat hund, och små tryck, som en bildtext, står under.
Liten text: 14px bildtext.
Knapp- Normal text, AA: GodkändBrödtext, minst 4.5:1
- Normal text, AAA: GodkändFörbättrad, minst 7:1
- Stor text, AA: Godkänd18pt+, eller 14pt+ fetstil, minst 3:1
- Stor text, AAA: GodkändFörbättrad, minst 4.5:1
- Ikoner och kontroller, AA: GodkändKnappar, kanter, diagramlinjer: 3:1
Använder WCAG 2:s kontrastformel. Kvoter avrundas aldrig uppåt, så 4.49:1 räknas inte som 4.5:1. Kontrollen sker på din enhet.
Varför använda Färgkontrastkontroll
- 100% gratis
- Använd den så ofta du vill. Ingen registrering, ingen vattenstämpel, inget att installera.
- Privat i sin design
- Det du skriver stannar i din webbläsare och skickas aldrig till oss.
- Fungerar på alla enheter
- Körs i din webbläsare på Windows, Mac, Linux, Android och iPhone. Ingen app behövs.
Så använder du Färgkontrastkontroll
- Ange Textfärg och Bakgrund som HEX, rgb(), hsl() eller ett namn som navy, eller välj dem med färgrutorna. Använd Byt för att vända på dem.
- Läs av kontrastkvoten och de fem resultaten: normal text AA och AAA, stor text AA och AAA samt ikoner och kontroller.
- Kontrollera förhandsvisningen för att se rubriker, brödtext, småtext och en knapp i dina färger.
- Om en nivå underkänns klickar du på en av de Närmaste färgerna som godkänns. Den behåller din nyans och ändrar bara hur ljus eller mörk texten är.
Vanliga frågor
Vilken kontrastkvot behöver jag?
WCAG AA kräver 4.5:1 för normal text och 3:1 för stor text och gränssnittsdelar som knappar, kanter och ikoner. AAA kräver 7:1 för normal text och 4.5:1 för stor text.
Vad räknas som stor text?
Minst 18 punkter (24px) vanlig stil, eller 14 punkter (cirka 18.7px) fet stil.
Hur räknas kontrastkvoten ut?
Med WCAG 2-formeln: varje färgs relativa luminans räknas ut, sedan delas den ljusare plus 0.05 med den mörkare plus 0.05. Resultatet går från 1:1 (ingen kontrast) till 21:1 (svart på vitt).
Varför underkänns 4.49:1?
WCAG säger att kvoter inte får avrundas uppåt, så allt under 4.5:1 uppfyller inte AA för normal text. Verktyget avrundar aldrig en kvot uppåt.
Hur åtgärdar jag en färg som underkänns?
Under Närmaste färger som godkänns föreslår verktyget en textfärg för AA och en för AAA. Varje förslag behåller din nyans och mättnad och ändrar bara ljusheten, så din varumärkesfärg känns igen. Klicka på en för att använda den.
Hanterar den transparenta textfärger?
Ja. En genomskinlig textfärg, som rgba(26, 20, 70, 0.6), blandas med bakgrunden innan kontrasten mäts. Bakgrundens transparens ignoreras och den behandlas som helt ogenomskinlig.
Behöver knappar och ikoner också kontrast?
Ja. WCAG 2.1 kräver 3:1 mellan gränssnittsdelar (knappkanter, formulärfält, ikoner, diagramlinjer) och färgerna intill dem. Resultatet Ikoner och kontroller kontrollerar detta.
Betyder godkänt att min webbplats är tillgänglig?
Det betyder att det här färgparet uppfyller WCAG:s kontrastregel. Tillgänglighet omfattar mycket mer, till exempel textstorlek, fokustillstånd, alternativ text och tangentbordsanvändning, så se detta som en kontroll bland flera.
Är Färgkontrastkontroll gratis?
Ja. Det är gratis att använda, utan registrering och utan att något behöver installeras.
Hjälp och guider (på engelska)
- The 60-30-10 Color Rule for Websites and Slides (Free)The 60-30-10 rule splits a design into a dominant colour, a secondary and an accent. Use it on web pages and slides with HEX codes and a free palette generator.
- Christmas Color Palette Ideas with HEX Codes (Free)Five Christmas colour palettes with HEX codes, from classic red and green to Nordic and midnight blue, with contrast-checked text pairs. Build more free.
- Color Theory Basics: The Wheel and Color Schemes (Free)The colour wheel, hue, saturation and lightness, and complementary, analogous, triadic and monochromatic schemes, with HEX examples from a free tool.
- CSS Gradient Text: background-clip Method (Free Generator)Make CSS gradient text with background-clip: text and a transparent fill. Copy a gradient from a free generator, add a solid fallback, check contrast.
Relaterade verktyg
- HEX till RGB-färgomvandlareKonvertera HEX till RGB, eller RGB till HEX, medan du skriver. Få HEX, RGB, HSL, HSV och CMYK samtidigt, var och en med en kopieringsknapp.
- FärgpalettsgeneratorGenerera en femfärgspalett med mellanslag, lås färgerna du gillar eller bygg ett schema från din egen basfärg. Se 11 nyanser av varje färg och exportera.
- FärgnamnsökareKlistra in en HEX-, RGB- eller HSL-kod och se närmaste CSS-färgnamn, med en enkel beskrivning som "mörk, stark blå". Filtrera alla 148 namngivna färger.