Sjekk fargekontrast
Bruk verktøyet til å måle kontrasten mellom forgrunns- og bakgrunnsfarger. Se resultater for WCAG 2.2 AA og AAA, nærmeste farge som består, gjennomsiktige lag og fargepar i paletten.
Gratis, uten registrering. Kjører i nettleseren din, uten KI-kall.
Kontrastforhold
4,54:1
| Brukes til | Nivå | Krever | Resultat |
|---|---|---|---|
| Vanlig tekst | AA | 4,5:1 | Bestått |
| Stor tekst | AA | 3:1 | Bestått |
| Grensesnittelementer og grafikk | AA | 3:1 | Bestått |
| Vanlig tekst | AAA | 7:1 | Ikke bestått |
| Stor tekst | AAA | 4,5:1 | Bestått |
Denne forhåndsvisningen bruker Machado-modellen fra 2009 med maksimal alvorlighetsgrad. Den gir en tilnærming til fargeoppfattelse, ikke en diagnose. WCAG-resultatene bruker alltid de opprinnelige synlige fargene.
Machado, Oliveira og Fernandes: publisert modellVanlig tekst på 16 piksler ser ut som denne setningen.
Stor tekst på 24 piksler
En kantlinje på 2 pikslerLisens for fargesynsmodellen
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
Sjekk en fargepalett
Legg til minst to farger for å sammenligne en palett. Farger som gjentas, telles bare én gang.
Et verktøy for fargekontrast måler forholdet mellom to farger fra 1:1 til 21:1. Kontroller tekstkravene i WCAG 2.2 AA og AAA og kravet på 3:1 for annet innhold. Finn en farge som består uten å endre fargetonen, legg gjennomsiktige lag over en valgt grunnfarge, sammenlign opptil 12 palettfarger og forhåndsvis fargesynsvariasjoner med Machado-modellen.
Slik bruker du verktøyet
- Skriv inn to farger
- Skriv inn en heksadesimal fargekode som #1a1a2e eller #fff, en rgb()- eller hsl()-verdi eller et CSS-fargenavn som navy. Du kan også bruke fargevelgerne. Alfa i rgba(), hsla() og heksadesimale koder med 4 eller 8 tegn støttes. Velg fargen på det underliggende lerretet for å beregne hvordan gjennomsiktige bakgrunns- og tekstlag ser ut. Skyveknappene for opasitet multipliserer alfaverdien som allerede finnes i hvert felt. Kontrasten beregnes fra de sammensatte fargene uten avrunding. De heksadesimale fargekodene er omtrentlige.
- Slik beregnes kontrastforholdet
- Den relative luminansen til hver farge beregnes med WCAG-formelen. Kontrastforholdet er luminansen til den lyseste fargen pluss 0.05, delt på luminansen til den mørkeste pluss 0.05. Resultatet rundes ned til to desimaler, slik at 4.499 aldri vises som bestått.
- Dette betyr nivåene
- AA er nivået de fleste lover og retningslinjer viser til: 4.5:1 for vanlig tekst og 3:1 for stor tekst. AAA krever 7:1 og 4.5:1. Stor tekst betyr minst 24 px, eller rundt 18.7 px i fet skrift. Ikoner, rammer rundt inndatafelt og fokusmarkeringer trenger 3:1 mot fargene ved siden av.
- Fargen vi foreslår
- Når en fargekombinasjon ikke oppfyller et nivå, beholder vi fargetonen og metningen til fargen du vil endre. Vi justerer bare lysheten i små trinn til kontrastforholdet består. Den nærmeste fargen som består, vises med sitt eget kontrastforhold. «Nærmest» betyr minst mulig endring i HSL-lyshet målt i trinn på 0.001, ikke perseptuell fargeavstand. Når du bruker et forslag, blir laget helt ugjennomsiktig. Hvis teksten er delvis gjennomsiktig, bør du velge en erstatningsfarge for teksten. En endring av bakgrunnen ville endret begge de synlige fargene.
- Forhåndsvisning av palett og fargesyn
- Skriv inn opptil 12 ulike, heldekkende farger, adskilt med linjeskift, komma eller semikolon. Radene er forgrunnsfarger, kolonnene er bakgrunnsfarger, og hvert fargepar viser kontrastforholdet og om det består AA-kravet for vanlig tekst. Velg et par for å se alle nivåene. Forhåndsvisningene av protanopi, deuteranopi og tritanopi bruker Machado, Oliveira og Fernandes (2009) ved full alvorlighetsgrad, med BSD-lisensierte matriser fra Colour Science. De gir en tilnærming til hvordan fargene oppfattes, men endrer ikke WCAG-beregningen og kan ikke brukes til å stille diagnose.
Spørsmål før du begynner
Sjekk hvordan bedriften din omtales i KI-svar
Tekniske kontroller hjelper deg med å forbedre en side. Den gratis skanningen av KI-synlighet viser hvilke svar som er kontrollert for bedriften din, og hva du bør jobbe med videre.