Kontrastforhold
- AA normal tekst 4.5:1
- AA stor tekst 3:1
- AAA normal tekst 7:1
- AAA stor tekst 4.5:1
- UI-elementer og grafik 3:1
Læsbart for alle
En stor underoverskrift
Brødtekst lider mest under lav kontrast, fordi man læser den længere og med lille skrift. Et tekstlink
Nærmeste farver, der består
Gemte farver
Farvekontrast-tjekker
Tjek, om tekst kan læses på sin baggrund, før du udgiver et design. Vælg eller skriv en tekstfarve og en baggrundsfarve, og tjekkeren viser WCAG 2.x-kontrastforholdet med bestået eller ikke bestået for AA og AAA, for normal og stor tekst og for UI-elementer. En live forhåndsvisning, simulering af farveblindhed og foreslåede rettelser hjælper dig med at finde et par, der virker. Vælg en tekstfarve og en baggrund som HEX, RGB eller HSL. WCAG-kontrastforholdet, AA- og AAA-resultaterne og forhåndsvisningen opdateres, mens du skriver, og de nærmeste farver, der består, bliver foreslået. Alt gemmes i denne browser.
Sådan virker det
- Vælg en tekstfarve og en baggrundsfarve, eller skriv dem som HEX, RGB eller HSL. Indstil tekstens opacitet, hvis teksten er halvgennemsigtig.
- Aflæs kontrastforholdet og AA- og AAA-mærkerne for normal tekst, stor tekst og UI-elementer, og se den live forhåndsvisning.
- Anvend en foreslået farve, hvis parret ikke består, gem gode par i din palet, og kopiér CSS til dit projekt.
Rettelser, ikke kun karakterer
Når et par ikke består, finder tjekkeren den nærmeste tekstfarve og baggrundsfarve med samme nuance og mætning, der når AA og AAA, og et klik anvender den. Halvgennemsigtig tekst blandes først med baggrunden, præcis som en browser tegner den.
Privat og flytbar
Dine farver og din palet gemmes kun i denne browser. Gem det hele som JSON for at tage en sikkerhedskopi eller flytte det til en anden enhed, eller gem resultatet som PDF eller billede. Fortryd og gentag dækker alle ændringer.
Ofte stillede spørgsmål
Er farvekontrast-tjekkeren gratis?
Ja. Den er gratis, kræver ingen konto og virker i alle moderne browsere.
Hvilket forhold skal jeg bruge?
WCAG-niveau AA kræver mindst 4,5:1 for normal tekst og 3:1 for stor tekst og for UI-elementer som feltkanter og ikoner. Niveau AAA kræver 7:1 for normal tekst og 4,5:1 for stor tekst.
Hvorfor dumper 4,48, når det afrundes til 4,5?
WCAG-grænserne er eksakte. Et forhold på 4,48:1 er under 4,5:1 og består derfor ikke AA for normal tekst. Tjekkeren sammenligner den uafrundede værdi, så mærkerne er altid strenge.
Relaterede værktøjer
Historien bag farvekontrast-tjekkeren
Hvor WCAG-kontrastværdierne kommer fra: 4,5:1 og 7:1, relativ luminans fra sRGB, 3:1-reglen for UI-elementer fra WCAG 2.1, farveblindhed og APCA til WCAG 3.
Farvepalettegenerator
Byg, lås og shuffle farvepaletter i din browser. Kopier HEX, CSS variabler, eller JSON, eksportere PNG eller SVG, og udtrække farver fra et foto.
Farvehjul
Vælg en farve på et interaktivt hjul, generere komplementære, analoge, triadic, og andre paletter, og kopiere HEX, RGB, HSL, HSV, eller CMYK.
Gradienteditor
Byg lineære og radiale CSS gradienter i din browser. Træk farve stopper, indstille vinklen, og kopiere CSS, HEX, RGB, HSL, HSV, eller CMYK.
Farver
Hvordan farve virker på skærme og i tryk: RGB, CMYK, HSL, hex, farve hjul, gradienter, kontrast, og PictorX værktøjer.
Er du klar til at prøve?
Åbn PictorX i din browser - ingen installation, ingen kreditkort kræves for at starte.
Gå til Editor