Kontrollera färgkontrast
Mät kontrasten mellan en förgrunds- och en bakgrundsfärg. Se resultaten för WCAG 2.2 AA och AAA, närmaste färg som uppfyller kraven, transparenta lager och färgpar i en palett.
Gratis, ingen registrering. Körs i din webbläsare utan AI-anrop.
Kontrastförhållande
4,54:1
| Används för | Nivå | Kräver | Resultat |
|---|---|---|---|
| Normalstor text | AA | 4,5:1 | Godkänd |
| Stor text | AA | 3:1 | Godkänd |
| Gränssnittskomponenter och grafik | AA | 3:1 | Godkänd |
| Normalstor text | AAA | 7:1 | Underkänd |
| Stor text | AAA | 4,5:1 | Godkänd |
Förhandsvisningen använder Machado-modellen från 2009 med maximal grad av färgseendeavvikelse. Den visar en ungefärlig uppfattning av färger, inte en diagnos. WCAG-resultaten baseras alltid på de ursprungliga synliga färgerna.
Machado, Oliveira och Fernandes: publicerad modellNormalstor text på 16 pixlar ser ut som den här meningen.
Stor text på 24 pixlar
En kantlinje på 2 pixlarLicens för färgseendemodellen
Copyright 2013 Colour Developers Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
Kontrollera en färgpalett
Lägg till minst två färger för att jämföra en palett. Färger som upprepas räknas bara en gång.
Verktyget mäter kontrasten mellan två färger som ett förhållande från 1:1 till 21:1. Kontrollera textkraven i WCAG 2.2 AA och AAA samt gränsen 3:1 för annat än text. Hitta en färg som uppfyller kraven utan att ändra nyansen, lägg transparenta lager på en vald underlagsfärg, jämför upp till 12 palettfärger och förhandsgranska färgseendedefekter med Machado-modellen.
Så använder du verktyget
- Ange två färger
- Ange en hexkod som #1a1a2e eller #fff, ett rgb()- eller hsl()-värde eller ett CSS-färgnamn som navy, eller använd färgväljarna. Alfa i rgba(), hsla() och hexkoder med 4 eller 8 siffror stöds. Välj underlagsfärg för att beräkna den synliga färgen hos transparenta bakgrunds- och textlager. Opacitetsreglagen multiplicerar alfavärdet som redan finns i respektive inmatning. Kontrasten beräknas med de sammansatta färgerna före avrundning. Hexetiketterna är ungefärliga.
- Så beräknas kontrastförhållandet
- Varje färgs relativa luminans beräknas med WCAG:s formel. Kontrastförhållandet är den ljusare färgens luminans plus 0.05, dividerat med den mörkare färgens luminans plus 0.05. Det visade värdet avrundas nedåt till två decimaler, så 4.499 visas aldrig som godkänt.
- Vad nivåerna innebär
- AA är nivån som de flesta lagar och policyer hänvisar till: 4.5:1 för vanlig text och 3:1 för stor text. AAA kräver 7:1 respektive 4.5:1. Stor text är minst 24 px, eller cirka 18.7 px i fetstil. Ikoner, inmatningsfältens kanter och fokusmarkeringar behöver 3:1 mot intilliggande färger.
- Den föreslagna färgen
- När en nivå inte uppnås behåller vi nyansen och mättnaden hos färgen du valt att ändra. Sedan justerar vi bara dess ljushet, ett litet steg i taget, tills kontrastförhållandet klarar kravet. Den närmaste färgen som klarar kravet visas med sitt eget kontrastförhållande. Närmast betyder minsta ändring av ljusheten i HSL med steg om 0.001, inte minsta upplevda färgskillnad. När du använder ett förslag blir lagret helt opakt. Om texten är genomskinlig bör du byta textfärg, eftersom en ändring av bakgrunden skulle påverka båda de synliga färgerna.
- Palett och förhandsgranskning av färgseende
- Ange upp till 12 olika helt opaka färger, åtskilda med radbrytningar, kommatecken eller semikolon. Raderna är förgrundsfärger och kolumnerna bakgrundsfärger. Varje färgpar visar kontrastförhållandet och om det klarar AA för vanlig text. Välj ett par för att granska alla nivåer. Förhandsgranskningarna av protanopi, deuteranopi och tritanopi använder Machado, Oliveira och Fernandes (2009) vid maximal svårighetsgrad, med Colour Science-matriser licensierade under BSD. De ger en ungefärlig bild av färgupplevelsen, men ändrar inte WCAG-beräkningen och kan inte användas för att ställa diagnos.
Frågor innan du börjar
Se hur ditt företag syns i AI-svar
Tekniska kontroller hjälper dig att åtgärda en sida. Den kostnadsfria AI-synlighetsskanningen visar vilka svar som kontrollerats för ditt företag och vad du bör arbeta med härnäst.