Color Contrast Checker

Kontrollera WCAG AA- och AAA-kontrastförhållande mellan text- och bakgrundsfärg

Prova ett exempel

Förgrundsfärg (text)

Bakgrundsfärg

Stort textexempel (18px fetstil)

Normalt textexempel — så här kommer din brödtext att se ut mot den bakgrundsfärg du valt.

Kontrastförhållande

14.63:1

WCAG-kompatibilitet

Godkänd

Normal AA

Godkänd

Normal AAA

Godkänd

Stor AA

Godkänd

Stor AAA

WCAG AANormal text: 4.5:1, Stor text (18px+ eller 14px fetstil): 3:1

WCAG AAANormal text: 7:1, Stor text (18px+ eller 14px fetstil): 4.5:1

Vad är kontrastkontroll av färger?

Kontrastkontroll av färger mäter luminansskillnaden mellan en förgrundsfärg (vanligtvis text) och en bakgrundsfärg, och uttrycker resultatet som ett förhållande. Ett förhållande på 1:1 innebär att färgerna är identiska; 21:1 är maximum och representerar svart på vitt eller vice versa. Web Content Accessibility Guidelines (WCAG), publicerade av W3C, definierar de minsta kontrastförhållanden som text måste uppfylla för att personer med nedsatt syn eller färgseendedefekter ska kunna läsa den.

Formeln för kontrastförhållande kommer från WCAG 2.x och bygger på relativ luminans — ett mått på hur ljus en färg upplevs av det mänskliga ögat. Relativ luminans beräknas genom att linjärisera varje sRGB-kanal (ta bort gamma) och vikta kanalerna enligt ITU-R BT.709-koefficienterna: 0,2126 för rött, 0,7152 för grönt och 0,0722 för blått. Grönt bidrar mest eftersom ögat är känsligast för grönt ljus. Förhållandet beräknas sedan som (L1 + 0,05) / (L2 + 0,05), där L1 är den ljusare färgens luminans.

WCAG definierar två överensstämmelsenivåer. Nivå AA kräver ett kontrastförhållande på minst 4,5:1 för normalstorlek text och 3:1 för stor text (18px eller mer, eller 14px fetstil). Nivå AAA höjer ribban till 7:1 respektive 4,5:1. WCAG 2.1 introducerade också Framgångskriterium 1.4.11, som kräver ett förhållande på 3:1 för icke-textuella UI-komponenter som kanter, ikoner och fokusindikatorer.

Varför använda denna kontrastkontroll?

Att kontrollera kontrast med ögat är opålitligt. Färger som ser distinkta ut på din kalibrerade skärm kan smälta samman på en billig laptop, i direkt solljus, eller för någon med deuteranopi. Ett numeriskt förhållande tar bort gissningarna och ger dig ett godkänd/underkänd-utslag mot WCAG-standarden.

Omedelbar beräkning av förhållande
Välj eller skriv in två färger och se kontrastförhållandet uppdateras i realtid. Inget formulär att skicka, ingen sidladdning.
🔒
Integritetsfokuserad bearbetning
Luminansberäkningen körs helt i din webbläsare. Inga färgvärden lämnar din maskin, och inga kakor eller analyser spårar dina val.
🎯
AA- och AAA-utslag
Resultaten visar godkänd/underkänd-status för WCAG AA och AAA, för både normal och stor textstorlek, så du vet exakt vilka trösklar du uppfyller.
📋
Inget konto krävs
Öppna sidan och börja testa. Ingen registrering, inga begränsningar. Verktyget fungerar offline när sidan väl är laddad.

Användningsområden för kontrastkontroll

Frontend-utveckling
Innan du levererar en UI-ändring, klistra in textfärgen och bakgrunden från din CSS i kontrollen för att bekräfta att paret uppfyller WCAG AA. Det fångar kontrastfel innan de når kodgranskning eller automatiserade revisioner.
Designleverans
Designers kan verifiera att varje färgpar i en Figma-fil uppfyller den krävda WCAG-nivån innan specifikationer överlämnas till ingenjörer. Att åtgärda kontrast i designstadiet är mycket billigare än att åtgärda det efter implementering.
Tillgänglighetsrevision
QA-ingenjörer som kör en WCAG-revision kan stickprovskontrollera specifika färgkombinationer som flaggats av automatiserade verktyg som Lighthouse eller axe. Kontrollen bekräftar det exakta förhållandet och vilka nivåer som godkänns eller underkänns.
Designsystem-tokens
När du definierar färgtokens för ett designsystem, testa varje förgrunds-/bakgrundspar för att säkerställa att tokenpaletten minst uppfyller AA. Dokumentera förhållandena bredvid tokenerna så att nedströms team kan lita på valen.
Testning av e-postmallar
E-postklienter tar bort CSS-funktioner som opacitet och blandningslägen, så de faktiska renderade färgerna kan skilja sig från källan. Testa de slutliga förgrunds- och bakgrundsvärdena som når inkorgen för att verifiera läsbarheten.
Studera tillgänglighetsstandarder
Studenter som lär sig WCAG kan experimentera med olika färgpar och direkt se hur förhållandet förändras. Att justera en kanal i taget bygger en praktisk förståelse för hur luminans relaterar till upplevd kontrast.

WCAG-krav på kontrastförhållande

Tabellen nedan sammanfattar de minsta kontrastförhållanden som krävs av WCAG 2.1 för olika innehållstyper och överensstämmelsenivåer. Stor text definieras som 18px (24 CSS-pixlar) eller mer vid normal vikt, eller 14px (18,66 CSS-pixlar) eller mer vid fetstil.

NivåMinförhållandeGäller förAnmärkning
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminans, AA och AAA förklarade

Beräkningen av kontrastförhållande har tre steg: beräkna luminans för varje färg, härleda förhållandet och jämföra det mot WCAG-trösklarna.

Relativ luminans
Ett enskilt tal från 0 (svart) till 1 (vitt) som representerar hur ljus en färg upplevs. Det tar hänsyn till den icke-linjära sRGB-gammakurvan och ögats ojämna känslighet för rött, grönt och blått. Ren grön (#00FF00) har en luminans på 0,7152, medan ren blå (#0000FF) har bara 0,0722.
WCAG AA
Baslinjens tillgänglighetsnivå som krävs av de flesta juridiska standarder, inklusive EU:s European Accessibility Act (EAA) och Section 508 i USA. AA kräver ett förhållande på 4,5:1 för normal text och 3:1 för stor text. De flesta designsystem siktar på AA som minimum för alla textelement.
WCAG AAA
Den förstärkta nivån avsedd för innehåll som måste vara läsbart av den bredast möjliga publiken, inklusive användare med betydande synnedsättning. AAA kräver 7:1 för normal text och 4,5:1 för stor text. Få hela webbplatser uppnår AAA på alla sidor, men kritiskt innehåll som juridiska meddelanden och medicinsk information siktar ofta på det.

Kodexempel

Beräkna WCAG-kontrastförhållanden programmatiskt. Varje exempel implementerar formeln för relativ luminans från WCAG 2.x och beräkningen av kontrastförhållande. Samma par med svart-på-vitt och indigo-på-vitt testas för jämförelse.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Vanliga frågor

Vad är ett bra kontrastförhållande för text?
För brödtext på webben, sikta på minst 4,5:1 (WCAG AA). Förhållanden över 7:1 uppfyller WCAG AAA och är mer bekväma för längre läsning. Svart på vitt ger det maximala förhållandet på 21:1, men ett mycket mörkt grått (#1e293b) på vitt ger fortfarande ungefär 12,6:1, vilket är väl över AAA.
Vad räknas som stor text i WCAG?
WCAG definierar stor text som 18px (24 CSS-pixlar) vid normal vikt, eller 14px (18,66 CSS-pixlar) vid fetstil. Stor text har en lägre kontrasttröskle eftersom större bokstavsformer är lättare att uppfatta. I CSS är 1px lika med 0,75pt, så 18pt är lika med 24px.
Är WCAG AA lagstadgat?
I många jurisdiktioner, ja. EU:s European Accessibility Act (EAA), som träder i kraft juni 2025, hänvisar till WCAG 2.1 AA. Section 508 i den amerikanska Rehabilitation Act kräver att federala myndigheter uppfyller WCAG 2.0 AA. Americans with Disabilities Act (ADA) har tolkats av amerikanska domstolar som ett krav på tillgängliga webbplatser, med WCAG AA som standard. Kanada, Australien och Storbritannien har liknande krav.
Hur beräknas relativ luminans?
Varje sRGB-kanalvärde (0–255) divideras med 255, sedan linjäriseras: värden vid eller under 0,04045 divideras med 12,92, och värden över transformeras med ((c + 0,055) / 1,055) ^ 2,4. De tre linjäriserade kanalerna viktas med ITU-R BT.709-koefficienterna (0,2126 R, 0,7152 G, 0,0722 B) och summeras. Resultatet är ett tal mellan 0 och 1.
Varför använder WCAG en förskjutning på 0,05 i kontrastformeln?
Förskjutningen på 0,05 förhindrar division med noll när en av färgerna är ren svart (luminans = 0). Den tar också hänsyn till omgivningsljus och skärmreflektioner som något höjer den upplevda luminansen hos även de mörkaste pixlarna. Utan denna förskjutning skulle svart på en mörk färg ge ett oändligt eller vilseledande högt förhållande.
Kan två färger klara AA men ändå vara svåra att läsa?
Ja. WCAG-kontrastförhållanden mäter luminansskillnad, inte nyasskillnad. En mättad röd på mättad grön kan tekniskt klara förhållandetröskeln men vara obehaglig att läsa för vissa betraktare, särskilt de med rött-grönt färgseendedefekt. Att para ihop färger som skiljer sig i både luminans och nyans tenderar att ge mer bekväma resultat.
Vad är skillnaden mellan WCAG 2.x-kontrast och APCA?
WCAG 2.x använder ett enkelt luminansförhållande som behandlar förgrund och bakgrund symmetriskt. APCA (Advanced Perceptual Contrast Algorithm), föreslagen för WCAG 3.0, använder en perceptuell ljushetsmodell som tar hänsyn till polaritet: mörk text på ljus bakgrund har annan upplevd kontrast än ljus text på mörk bakgrund vid samma luminansskillnad. APCA är fortfarande ett arbetsutkast och har inte ersatt WCAG 2.x-metoden i någon förordning.