Fargekonverter og kontrastsjekker

Konverteren oversetter én farge mellom HEX (#rrggbb), RGB (rgb(r, g, b)) og HSL (hsl(h, s%, l%)) i sanntid, så du kan lime inn uansett format designsystemet ditt bruker og få de to andre. Kontrastsjekkeren tar en forgrunn og bakgrunn, lineariserer begge gjennom sRGB-gammakurven og rapporterer WCAG 2.x-kontrastforholdet sammen med AA / AAA-vurderinger for normal og stor tekststørrelse.

Eksempel

Inndata — en typisk merkeblå:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

Parret mot hvit (#ffffff) som bakgrunn:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

Hvorfor feiler WCAG AAA for dette fargeparet?

Dette er de vanligste kontrast- og konverteringsfellene det er verdt å følge med på:

• Forveksler AA stor med AA normal. Stor tekst trenger bare 3:1, så en lenke som ser bra ut i en H1 kan fortsatt feile i brødtekststørrelse. Hvis et par treffer 3.5:1, passerer det overskrifter, men feiler avsnitt.
• Bruker HSL-lyshet som erstatning for kontrast. hsl(0, 100%, 50%) (rød) og hsl(240, 100%, 50%) (blå) har begge L=50 %, men svært ulik luminans. Beregn alltid kontrast fra RGB-verdiene, ikke fra HSL-lyshet.
• Glemmer alfa-komposittering. Tekst med rgba(0, 0, 0, 0.6) på hvit er i praksis #666666. Sjekk den flate HEX, ikke den halvtransparente verdien.
• Feil hex-lengde. #fff utvides til #ffffff, men #ffff er en 4-sifret kortform med en alfabyte. Dobbeltsjekk sifferantallet når et HEX-felt stille avviser input.
• Blander display-P3 og sRGB. Farger tatt fra designverktøy som Figma i bredgamutmodus kan være utenfor sRGB-område, og nettlesere vil klippe dem. Konverter til sRGB i kildeverktøyet før du kopierer HEX-en.
• Tester kontrast kun mot rent hvit. Hvis den virkelige layouten plasserer tekst på #f3f4f6 eller på et foto, er den synlige kontrasten lavere. Test med den faktiske bakgrunnen.

Hvilket kontrastforhold trenger jeg for å bestå WCAG AA?

WCAG 2.1 AA krever 4.5:1 for normal brødtekst og 3:1 for stor tekst, der stor betyr minst 18 pt (24 px) normal eller 14 pt (18.66 px) fet. UI-komponenter og grafiske objekter trenger 3:1 mot bakgrunnen. AAA hever listen til 7:1 for normal tekst og 4.5:1 for stor tekst.

Hvorfor gir HSL-en jeg skriver inn litt andre RGB-verdier tilbake?

HSL lagres som heltallsprosent i de fleste verktøy, så turen RGB til HSL til RGB kan forskyves med én enhet på hver kanal. Den driften er innenfor en JND og usynlig på skjerm, men hvis du trenger eksakt tur-retur-troskap, behold HEX- eller RGB-verdien som sannhetens kilde og behandle HSL som et visningsspråk.

Bruker dette verktøyet sRGB-gammakorreksjon for kontrast?

Ja. Kontrastberegningen følger WCAG 2.x-formelen, som lineariserer hver sRGB-kanal med gammakurven, beregner relativ luminans og tar (L1 + 0.05) / (L2 + 0.05). Enkelt snitt-av-kanaler eller naiv HSL-lyshet gir misvisende tall og matcher ikke WCAG-resultatet.

Hvordan håndterer jeg alfa eller halvtransparente farger?

WCAG-kontrast er definert mot en solid bakgrunn, så flat ut enhver alfa ved å komposittere forgrunnen over den virkelige bakgrunnen først. For eksempel er en 50 % svart tekstblokk på en hvit side i praksis #808080 på #ffffff. Send den flate HEX-en inn i sjekkeren i stedet for den halvtransparente verdien.

Er HEX #rgb det samme som #rrggbb?

Ja. Den 3-sifrede kortformen utvider hver nibble ved å gjenta den, så #f0c blir #ff00cc. De 4-sifrede og 8-sifrede formene legger til en alfakanal. Dette verktøyet godtar 3-sifret, 6-sifret og 8-sifret HEX, og behandler alfabyten kun som informasjon for kontrast, siden WCAG krever en solid komposittert farge.

Lagrer dere fargene jeg skriver eller plukker?

Nei. Vi beholder ingen oppføring av fargene du tester, konverterer eller sjekker for kontrast. Alt du skriver eller drar inn i plukkeren forkastes når du lukker fanen — ingen logging, ingen analyse av fargeverdiene dine. Kikk i nettleserens utviklerverktøy hvis du vil se selv.