Tjek farvekontrast
Brug dette værktøj til at måle kontrasten mellem forgrund og baggrund. Se resultater for WCAG 2.2 AA og AAA, den nærmeste farve, der opfylder kravene, transparente lag og farvepar i en palet.
Gratis og uden tilmelding. Kører i din browser uden AI-kald.
Kontrastforhold
4,54:1
| Bruges til | Niveau | Kræver | Resultat |
|---|---|---|---|
| Normal tekst | AA | 4,5:1 | Bestået |
| Stor tekst | AA | 3:1 | Bestået |
| Brugerfladeelementer og grafik | AA | 3:1 | Bestået |
| Normal tekst | AAA | 7:1 | Ikke bestået |
| Stor tekst | AAA | 4,5:1 | Bestået |
Denne forhåndsvisning bruger Machado-modellen fra 2009 med maksimal sværhedsgrad. Den er en tilnærmelse af farveopfattelse, ikke en diagnose. WCAG-resultaterne bruger altid de oprindelige, synlige farver.
Machado, Oliveira og Fernandes: offentliggjort modelNormal tekst på 16 pixels ser ud som denne sætning.
Stor tekst på 24 pixels
En kant på 2 pixelsLicens til modellen for farvesyn
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
Tjek en farvepalet
Tilføj mindst to farver for at sammenligne en palet. Gentagne farver tælles kun én gang.
Et værktøj til farvekontrast måler forholdet mellem to farver på en skala fra 1:1 til 21:1. Tjek tekstkravene i WCAG 2.2 AA og AAA samt kravet på 3:1 for elementer, der ikke er tekst. Find en farve, der opfylder kravene uden at ændre farvetonen, læg transparente lag oven på en valgt baggrundsfarve, sammenlign op til 12 paletfarver, og se forhåndsvisninger af farvesynsforstyrrelser med Machado-modellen.
Sådan bruger du værktøjet
- Indtast to farver
- Indtast en hexkode som #1a1a2e eller #fff, en rgb()- eller hsl()-værdi eller et CSS-farvenavn som navy. Du kan også bruge farvevælgerne. Alfa i rgba(), hsla() og hexfarver med 4 eller 8 cifre understøttes. Vælg den underliggende baggrundsfarve, som transparente baggrunds- og tekstlag skal lægges oven på. Skyderne for opacitet ganges med den alfa, der allerede er angivet for hver farve. Kontrasten beregnes ud fra de sammensatte farver uden afrunding. Hexangivelserne er omtrentlige.
- Sådan beregnes kontrastforholdet
- Hver farves relative luminans beregnes med WCAG-formlen. Derefter divideres den lysere farves luminans plus 0.05 med den mørkere farves luminans plus 0.05. Forholdet vises afrundet nedad til to decimaler, så 4.499 vises aldrig som bestået.
- Det betyder niveauerne
- AA er det niveau, de fleste love og politikker henviser til: 4.5:1 for normal tekst og 3:1 for stor tekst. AAA kræver 7:1 og 4.5:1. Stor tekst er mindst 24 px eller cirka 18.7 px med fed skrift. Ikoner, kanter på inputfelter og fokusmarkeringer skal have et kontrastforhold på 3:1 til farverne omkring dem.
- Den foreslåede farve
- Hvis en farve ikke opfylder et niveau, bevarer vi farvetonen og mætningen for den farve, du har valgt at ændre. Kun lysheden justeres, ét lille trin ad gangen, indtil kontrastforholdet opfylder kravet. Den nærmeste farve, der opfylder kravet, vises med sit eget kontrastforhold. Nærmest betyder den mindste ændring i HSL-lyshed målt i trin på 0.001, ikke den mindste synlige farveforskel. Når du anvender et forslag, bliver laget uigennemsigtigt. Ved transparent tekst bør du vælge en erstatning for tekstfarven, da en ændring af baggrunden ville påvirke begge synlige farver.
- Palet og forhåndsvisninger af farvesyn
- Indtast op til 12 forskellige, uigennemsigtige farver adskilt af linjeskift, kommaer eller semikoloner. Rækkerne viser forgrundsfarver, kolonnerne baggrundsfarver. For hvert par vises kontrastforholdet, og om det opfylder AA-kravet for normal tekst. Vælg et par for at se alle niveauer. Forhåndsvisninger af protanopi, deuteranopi og tritanopi bruger Machado, Oliveira og Fernandes (2009) ved fuld sværhedsgrad med Colour Science-matricer under BSD-licens. De giver kun et omtrentligt billede af, hvordan farverne opfattes. De ændrer ikke WCAG-beregningen og kan ikke bruges til at stille en diagnose.
Spørgsmål, før du går i gang
Se, om din virksomhed optræder i AI-svar
Tekniske tjek hjælper dig med at rette en side. Den gratis AI-synlighedsscanning viser de svar, der er tjekket for din virksomhed, og hvad du bør arbejde videre med.