Kortversjonen
- Et nettsteds fargevalg fungerer best som en kort rolleliste: sidebunn, flate, tekst, dempet tekst, kant, aksent og statusfarger.
- De fleste nettsteder trenger én merkevareaksent, hovedsakelig til knapper og lenker, mens nøytrale farger gjør resten.
- WCAG krever kontrast på minst 4,5:1 for vanlig tekst og 3:1 for stor tekst og grensesnittdeler som inndatafeltets kant.
- Å lagre farger som egendefinerte CSS-egenskaper, eller designtokens, lar hele nettstedet bytte tema ved å erstatte ett verdisett.
- Et mørkt tema er et eget verdisett for de samme rollene, ikke en invertering av det lyse.
På denne siden
Godt fargevalg til nettsteder er ikke en moodboard med fem favorittfarger. Det er en kort liste roller med én farge hver: sidebunn, hevede flater, brødtekst, roligere tekst, kanter, én aksent til handlinger og rødt, ravgult og grønt til status. Velg merkevareaksenten først, bygg rolige nøytrale toner rundt, sjekk kontrasten i hvert tekstpar og lagre resultatet som CSS-variabler, så hele nettstedet bruker samme verdier.
Rollene alle nettsteder trenger
Tommelfingerregel
Tommelfingerregel
Tommelfingerregel
Brukes til
Tommelfingerregel
Tommelfingerregel
Tommelfingerregel
Tommelfingerregel
Slik velger du nettstedets farger
- 1
Begynn med én aksent
Merkevarefargen din eller fargen du vil at folk skal forbinde med deg. Har du ingen, hjelper velge merkevarefarger.
- 2
Ton de nøytrale mot den
Gråtoner med et hint av aksentens fargetone føles beslektet. En blågrønn merkevare får kjølige, litt blå gråtoner; en terrakottamerkevare får varme, kremaktige.
- 3
Velg lyst, mørkt eller begge
Velg temaet flest besøkende vil se først, og design det fullt før du begynner på det andre.
- 4
Sjekk alle tekstpar
Tekst på bunn, tekst på flate, dempet tekst på begge og hvitt på aksentknappen. Rett alt under 4,5:1.
- 5
Bruk 60, 30, 10
Omtrent 60% bunn, 30% flater og tekst, 10% aksent. 60 30 10-regelen forklarer balansen.
Tre nettstedspaletter å starte fra
Kontrastregler som holder nettstedet leselig
WCAGs kontrastretningslinjer setter minstemålet: 4,5:1 for vanlig tekst, 3:1 for stor tekst, omtrent 24 px eller 19 px fet, og 3:1 for grensesnittkomponenter som feltkanter og meningsbærende ikoner. WebAIMs kontrastkontroll tester alle par. Fargekontrastguiden dekker årsakene og særtilfellene.
Vanlige feil
- Lysegrå plassholdertekst som eneste etikett
- Hvit tekst på lys merkevarefarge som gul eller himmelblå
- Lenker som bare skilles fra brødtekst med farge
- En lys kant som eneste avgrensning av et skjemafelt
- Feilmeldinger som bare vises i rødt
Løsninger
- Ekte etiketter over felt, dempet tekst med 4,5:1
- Mørk tekst på lyse aksenter, eller en dypere aksentnyanse
- Understrek lenker i brødtekst, eller gjør dem fete
- Feltkanter med 3:1 mot bakgrunnen
- Et ikon eller ord ved siden av fargen
Skriv fargevalget som tokens
Lagre hver rolle én gang som en egendefinert CSS-egenskap og bruk bare disse variablene i stilene. Da endres mørkt tema, sesongkampanje eller ny profil i én verdiblokk fremfor gjennom et søk i alle filer. Dette er kjernen i designtokens.
:root {
--ground: #f7f9fb;
--surface: #ffffff;
--text: #14202b;
--text-muted: #52606d;
--border-input: #8a96a3;
--accent: #0f766e;
--on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--ground: #0f0e17;
--surface: #1a1926;
--text: #ecebf3;
--text-muted: #a5a3b8;
--border-input: #6e6b85;
--accent: #a78bfa;
--on-accent: #0f0e17;
}
}
body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }--on-accent bytter fra hvitt til nesten svart, fordi en lys syrinknapp trenger mørk tekst.Mørk modus er en egen palett
Å invertere en lys palett fungerer sjelden. Mettede aksenter lyser for sterkt på svart, skygger forsvinner og rent hvit tekst blender. Bygg mørk modus som et andre verdisett: nesten svart bunn med et fargeskjær, flater som blir lysere når de heves, mykere tekst og en aksent lysnet til god kontrast. Design for mørk modus går dypere.
Hvor merkevarefargen brukes utover knapper
Brukes aksenten bare på knapper, kan nettstedet virke generisk. Løsningen er ett sted merkevaren får uttrykke seg, som toppbildet, et fremhevet felt eller bunnteksten. En rik gradient i merkevarens fargefamilie fungerer godt der, mens resten av siden er rolig og leselig.
Ett uttrykksfullt felt i 1920×1080 bærer merkevaren; resten av nettstedet bruker de rolige rollene over.
En Mark fra Gradiently kan være dette uttrykksfulle laget: en bakgrunn ingen andre har, som velger tekstfarge fra egen palett for hver linje og holder overskriftene leselige. Se fargeharmoni og design av toppseksjonen for mer om kombinasjoner.
Spørsmål folk stiller
Hvor mange farger bør et nettsted ha?
Vanligvis én merkevareaksent, tre til fem nøytrale farger til bunn, flater, tekst og kanter, og tre statusfarger. Flere aksenter gjør det vanskeligere å se hva som er klikkbart.
Hvordan velger jeg farger til nettstedet?
Begynn med merkevareaksenten, ton nøytrale gråfarger mot den, velg lyst eller mørkt tema og sjekk at alle tekstpar har minst 4,5:1 i kontrast.
Hvilken kontrast trenger nettstedstekst?
WCAG krever minst 4,5:1 for vanlig tekst og 3:1 for stor tekst og grensesnittdeler som feltkanter.
Bør en nettstedbakgrunn være rent hvit?
Det er ikke nødvendig. En svakt farget brukket hvit virker ofte roligere og lar hvite kort skille seg ut som flater.
Hvordan legger jeg til mørk modus i fargevalget?
Definer hver fargerolle som en egendefinert CSS-egenskap, og legg til et andre verdisett i en prefers-color-scheme: dark-mediespørring.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår