Zovo Palette Lab

A WCAG color contrast checker and accessible color palette generator for designers, front-end developers and accessibility reviewers. Check one pair: give a text colour and a background in hex (with or without #), 8-digit hex with alpha, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) or a CSS colour name. Wide-gamut colours are clipped to sRGB with a note. Zovo Palette Lab returns the computed WCAG 2.x contrast ratio and pass or fail for AA and AAA normal text, large text (24px, or 18.66px bold) and 3:1 for UI components and graphics. Ratios are truncated to two decimals and rounded down, so a ratio of 4.499:1 is shown as 4.49 and fails AA instead of looking like a pass. Translucent text is composited over the background first, the way browsers paint it in sRGB. When a pair fails, it suggests the nearest passing colours for AA and AAA, both darker and lighter, by changing only OKLCH lightness so the hue and chroma of your brand colour stay as close as sRGB allows. Each suggestion comes with its calculated ratio. APCA Lc is shown as secondary, clearly labelled draft information. Check a whole palette: 2 to 12 colours become a pairwise contrast matrix showing which combinations work for body text, large text and UI, plus a recommended text colour for each background (a palette colour that passes AA, otherwise black or white). Generate an accessible color palette from one hex colour: a 50-950 tonal scale built in OKLCH where 50-400 pass AA with black text, 500 passes AA with both white and black text, 600 passes AA with white text and 700-950 pass AAA with white text. Each step lists its ratios on white and black. Download CSS custom properties (with a Tailwind v4 @theme block) or a Tailwind config JSON, or copy the snippets. The interactive view shows live swatches with sample text at real sizes, ratio badges, pass and fail chips, colour pickers that re-run the check, a palette matrix and copy buttons. Limitations: works with colour values only (it does not read colours from images, screenshots or web pages, resolve CSS variables or currentColor, or rate a gradient as a whole, so check each gradient stop); a contrast ratio is one part of accessibility, not a full conformance audit; APCA is informational only.

color contrast checker contrast checker wcag contrast checker contrast ratio accessible color palette generator color palette generator from hex tailwind color palette generator oklch apca accessibility

WCAG-Kontrast & Paletten WCAG-Farbkontrast-Checker und Generator für barrierefreie Farbpaletten für Designer, Frontend-Entwickler und Barrierefreiheits-Prüfer. Gib Text- und Hintergrundfarbe an (Hex, Hex mit Alpha, rgb(), hsl(), oklch() oder CSS-Farbnamen) und erhalte das exakte WCAG-2.x-Kontrastverhältnis sowie AA und AAA für normalen Text, großen Text und UI-Elemente (3:1). Werte werden auf zwei Nachkommastellen abgeschnitten, nie aufgerundet: 4,499:1 besteht AA nicht. Fällt ein Paar durch, schlägt das Tool die nächstgelegenen Farben für AA und AAA vor (dunkler und heller), indem nur die OKLCH-Helligkeit geändert wird. Außerdem prüft es ganze Paletten (2-12 Farben) als Kontrastmatrix und erzeugt 50-950-Tonleitern mit dokumentierten AA/AAA-Stufen, als CSS-Variablen und Tailwind-Konfiguration zum Download. APCA wird nur informativ angezeigt. Contraste WCAG y paletas Comprobador de contraste de color WCAG y generador de paletas accesibles para diseñadores, desarrolladores front-end y revisores de accesibilidad. Indica el color del texto y del fondo (hex, hex con alfa, rgb(), hsl(), oklch() o un nombre CSS) y obtén la relación de contraste WCAG 2.x exacta y el resultado AA y AAA para texto normal, texto grande y componentes de interfaz (3:1). Las relaciones se truncan a dos decimales y nunca se redondean hacia arriba, así que 4,499:1 no aprueba AA. Si una pareja no cumple, sugiere los colores más cercanos que cumplen AA y AAA (más oscuros y más claros) cambiando solo la luminosidad OKLCH. También revisa paletas completas (2-12 colores) en una matriz de contraste y genera escalas 50-950 con pasos AA/AAA documentados, con variables CSS y configuración de Tailwind para descargar. APCA se muestra solo como información. Contraste WCAG et palettes Vérificateur de contraste des couleurs WCAG et générateur de palettes accessibles pour les designers, développeurs front-end et auditeurs d'accessibilité. Indiquez la couleur du texte et du fond (hex, hex avec alpha, rgb(), hsl(), oklch() ou un nom CSS) pour obtenir le rapport de contraste WCAG 2.x exact et le résultat AA et AAA pour le texte normal, le grand texte et les composants d'interface (3:1). Les rapports sont tronqués à deux décimales et jamais arrondis vers le haut : 4,499:1 échoue au niveau AA. Si une paire échoue, l'outil propose les couleurs conformes AA et AAA les plus proches (plus sombres et plus claires) en ne modifiant que la luminosité OKLCH. Il vérifie aussi des palettes entières (2 à 12 couleurs) sous forme de matrice et génère des gammes 50-950 aux paliers AA/AAA documentés, avec variables CSS et configuration Tailwind à télécharger. L'APCA est affiché à titre indicatif uniquement. WCAGコントラストとパレット デザイナー、フロントエンド開発者、アクセシビリティ担当者向けのWCAGカラーコントラストチェッカー兼アクセシブルなカラーパレット生成ツールです。文字色と背景色（hex、アルファ付きhex、rgb()、hsl()、oklch()、CSSの色名）を指定すると、正確なWCAG 2.xのコントラスト比と、通常テキスト・大きなテキスト・UI部品（3:1）に対するAA/AAAの合否を返します。比は小数第2位で切り捨て、切り上げは行わないため、4.499:1はAA不合格と表示されます。不合格の場合は、OKLCHの明度だけを変えて、AAとAAAを満たす最も近い色（暗い方と明るい方）を提案します。2〜12色のパレット全体をコントラスト行列で確認でき、1色から50〜950の階調スケール（AA/AAAの基準を明記）を作成し、CSS変数とTailwind設定をダウンロードできます。APCAは参考情報としてのみ表示します。 Kontrast WCAG i palety Sprawdzanie kontrastu kolorów według WCAG i generator dostępnych palet dla projektantów, front-end developerów i audytorów dostępności. Podaj kolor tekstu i tła (hex, hex z kanałem alfa, rgb(), hsl(), oklch() lub nazwę CSS), a otrzymasz dokładny współczynnik kontrastu WCAG 2.x oraz wynik AA i AAA dla zwykłego tekstu, dużego tekstu i elementów interfejsu (3:1). Współczynniki są obcinane do dwóch miejsc po przecinku, nigdy zaokrąglane w górę, więc 4,499:1 nie przejdzie AA. Gdy para nie spełnia wymagań, narzędzie proponuje najbliższe kolory spełniające AA i AAA (ciemniejsze i jaśniejsze), zmieniając tylko jasność OKLCH. Sprawdza też całe palety (2-12 kolorów) w macierzy kontrastu i buduje skale 50-950 z udokumentowanymi krokami AA/AAA, z plikami CSS i konfiguracją Tailwind do pobrania. APCA jest pokazywane wyłącznie informacyjnie. Contraste WCAG e paletas Verificador de contraste de cores WCAG e gerador de paletas acessíveis para designers, desenvolvedores front-end e revisores de acessibilidade. Informe a cor do texto e do fundo (hex, hex com alfa, rgb(), hsl(), oklch() ou nome CSS) e receba a razão de contraste WCAG 2.x exata e o resultado AA e AAA para texto normal, texto grande e componentes de interface (3:1). As razões são truncadas em duas casas decimais e nunca arredondadas para cima, então 4,499:1 não passa no AA. Quando um par falha, sugere as cores mais próximas que passam em AA e AAA (mais escuras e mais claras), alterando apenas a luminosidade OKLCH. Também verifica paletas inteiras (2 a 12 cores) em uma matriz de contraste e gera escalas 50-950 com etapas AA/AAA documentadas, com variáveis CSS e configuração do Tailwind para baixar. O APCA aparece apenas como informação.