[{"data":1,"prerenderedAt":733},["ShallowReactive",2],{"guide-accessible-color-palettes":3},{"id":4,"title":5,"body":6,"date":725,"description":726,"extension":727,"meta":728,"navigation":337,"path":729,"readingTime":334,"seo":730,"stem":731,"__hash__":732},"guides\u002Fguides\u002Faccessible-color-palettes.md","Building Accessible Color Palettes",{"type":7,"value":8,"toc":707},"minimark",[9,14,18,21,25,28,80,87,93,98,101,132,136,140,143,244,248,251,357,364,368,371,447,453,457,460,463,498,587,591,595,615,619,662,666,687,691,694,703],[10,11,13],"h2",{"id":12},"why-accessibility-and-color-must-coexist","Why Accessibility and Color Must Coexist",[15,16,17],"p",{},"An estimated 300 million people worldwide have color vision deficiency. Millions more have low vision or age-related visual decline. If your color palette doesn't provide sufficient contrast, a significant portion of your audience simply can't read your content.",[15,19,20],{},"Accessibility isn't a constraint on design — it's a design skill. The best accessible palettes are indistinguishable from good design to sighted users, but they unlock your product for everyone else.",[10,22,24],{"id":23},"wcag-contrast-requirements","WCAG Contrast Requirements",[15,26,27],{},"The Web Content Accessibility Guidelines define two levels of contrast compliance:",[29,30,31,50],"table",{},[32,33,34],"thead",{},[35,36,37,41,44,47],"tr",{},[38,39,40],"th",{},"Level",[38,42,43],{},"Normal Text",[38,45,46],{},"Large Text",[38,48,49],{},"UI Components",[51,52,53,67],"tbody",{},[35,54,55,59,62,65],{},[56,57,58],"td",{},"AA (minimum)",[56,60,61],{},"4.5:1",[56,63,64],{},"3:1",[56,66,64],{},[35,68,69,72,75,77],{},[56,70,71],{},"AAA (enhanced)",[56,73,74],{},"7:1",[56,76,61],{},[56,78,79],{},"—",[15,81,82,86],{},[83,84,85],"strong",{},"Large text"," is defined as 18pt (24px) or 14pt (18.66px) bold. Everything else counts as normal text.",[15,88,89,92],{},[83,90,91],{},"UI components"," include form fields, buttons, icons, and focus indicators. They need at least 3:1 contrast against adjacent colors.",[94,95,97],"h3",{"id":96},"contrast-ratio-basics","Contrast Ratio Basics",[15,99,100],{},"The contrast ratio compares the relative luminance of two colors:",[102,103,104,111,116,121,126],"ul",{},[105,106,107,110],"li",{},[83,108,109],{},"1:1"," — No contrast (same color)",[105,112,113,115],{},[83,114,64],{}," — Minimum for large text and UI elements",[105,117,118,120],{},[83,119,61],{}," — Minimum for normal text (AA)",[105,122,123,125],{},[83,124,74],{}," — Enhanced readability (AAA)",[105,127,128,131],{},[83,129,130],{},"21:1"," — Maximum (black on white)",[10,133,135],{"id":134},"building-a-palette-that-scales","Building a Palette That Scales",[94,137,139],{"id":138},"step-1-start-with-neutral-tones","Step 1: Start with Neutral Tones",[15,141,142],{},"Create a gray scale that maps to semantic roles. Each step should have at least 4.5:1 contrast against adjacent steps for text usage.",[29,144,145,161],{},[32,146,147],{},[35,148,149,152,155,158],{},[38,150,151],{},"Token",[38,153,154],{},"Hex",[38,156,157],{},"Use",[38,159,160],{},"Contrast on White",[51,162,163,180,196,212,228],{},[35,164,165,171,174,177],{},[56,166,167],{},[168,169,170],"code",{},"gray-900",[56,172,173],{},"#111827",[56,175,176],{},"Primary text",[56,178,179],{},"17.4:1",[35,181,182,187,190,193],{},[56,183,184],{},[168,185,186],{},"gray-700",[56,188,189],{},"#374151",[56,191,192],{},"Secondary text",[56,194,195],{},"9.3:1",[35,197,198,203,206,209],{},[56,199,200],{},[168,201,202],{},"gray-500",[56,204,205],{},"#6b7280",[56,207,208],{},"Placeholder text",[56,210,211],{},"4.6:1",[35,213,214,219,222,225],{},[56,215,216],{},[168,217,218],{},"gray-300",[56,220,221],{},"#d1d5db",[56,223,224],{},"Borders, dividers",[56,226,227],{},"1.6:1 (decorative)",[35,229,230,235,238,241],{},[56,231,232],{},[168,233,234],{},"gray-100",[56,236,237],{},"#f3f4f6",[56,239,240],{},"Backgrounds",[56,242,243],{},"1.1:1 (background)",[94,245,247],{"id":246},"step-2-add-brand-colors-with-contrast-pairs","Step 2: Add Brand Colors with Contrast Pairs",[15,249,250],{},"For each brand color, define both a background shade and a text-on-background shade that meets 4.5:1 contrast.",[252,253,258],"pre",{"className":254,"code":255,"language":256,"meta":257,"style":257},"language-css shiki shiki-themes github-light github-dark",":root {\n  --blue-500: #3b82f6;  \u002F* Brand primary *\u002F\n  --blue-600: #2563eb;  \u002F* Accessible text on light bg *\u002F\n  --blue-100: #dbeafe;  \u002F* Light background *\u002F\n}\n\n\u002F* Blue-600 on white = 4.6:1 (AA pass) *\u002F\n\u002F* White on blue-600 = 4.6:1 (AA pass) *\u002F\n\u002F* Blue-500 on white = 3.8:1 (AA fail for normal text) *\u002F\n","css","",[168,259,260,273,294,310,326,332,339,345,351],{"__ignoreMap":257},[261,262,265,269],"span",{"class":263,"line":264},"line",1,[261,266,268],{"class":267},"sScJk",":root",[261,270,272],{"class":271},"sVt8B"," {\n",[261,274,276,280,283,287,290],{"class":263,"line":275},2,[261,277,279],{"class":278},"s4XuR","  --blue-500",[261,281,282],{"class":271},": ",[261,284,286],{"class":285},"sj4cs","#3b82f6",[261,288,289],{"class":271},";  ",[261,291,293],{"class":292},"sJ8bj","\u002F* Brand primary *\u002F\n",[261,295,297,300,302,305,307],{"class":263,"line":296},3,[261,298,299],{"class":278},"  --blue-600",[261,301,282],{"class":271},[261,303,304],{"class":285},"#2563eb",[261,306,289],{"class":271},[261,308,309],{"class":292},"\u002F* Accessible text on light bg *\u002F\n",[261,311,313,316,318,321,323],{"class":263,"line":312},4,[261,314,315],{"class":278},"  --blue-100",[261,317,282],{"class":271},[261,319,320],{"class":285},"#dbeafe",[261,322,289],{"class":271},[261,324,325],{"class":292},"\u002F* Light background *\u002F\n",[261,327,329],{"class":263,"line":328},5,[261,330,331],{"class":271},"}\n",[261,333,335],{"class":263,"line":334},6,[261,336,338],{"emptyLinePlaceholder":337},true,"\n",[261,340,342],{"class":263,"line":341},7,[261,343,344],{"class":292},"\u002F* Blue-600 on white = 4.6:1 (AA pass) *\u002F\n",[261,346,348],{"class":263,"line":347},8,[261,349,350],{"class":292},"\u002F* White on blue-600 = 4.6:1 (AA pass) *\u002F\n",[261,352,354],{"class":263,"line":353},9,[261,355,356],{"class":292},"\u002F* Blue-500 on white = 3.8:1 (AA fail for normal text) *\u002F\n",[15,358,359,360,363],{},"Notice that ",[168,361,362],{},"blue-500"," fails AA for normal text on white. Many popular brand colors do. The fix: use a darker shade for text and keep the lighter shade for decorative or large-text use.",[94,365,367],{"id":366},"step-3-define-semantic-colors","Step 3: Define Semantic Colors",[15,369,370],{},"Semantic colors signal meaning and must be distinguishable from each other, especially for users with color vision deficiency:",[29,372,373,389],{},[32,374,375],{},[35,376,377,380,383,386],{},[38,378,379],{},"Meaning",[38,381,382],{},"Color",[38,384,385],{},"Accessible Shade",[38,387,388],{},"Pair With",[51,390,391,405,419,433],{},[35,392,393,396,399,402],{},[56,394,395],{},"Success",[56,397,398],{},"Green",[56,400,401],{},"#15803d",[56,403,404],{},"White text: 5.4:1",[35,406,407,410,413,416],{},[56,408,409],{},"Warning",[56,411,412],{},"Amber",[56,414,415],{},"#b45309",[56,417,418],{},"White text: 4.7:1",[35,420,421,424,427,430],{},[56,422,423],{},"Error",[56,425,426],{},"Red",[56,428,429],{},"#dc2626",[56,431,432],{},"White text: 4.6:1",[35,434,435,438,441,444],{},[56,436,437],{},"Info",[56,439,440],{},"Blue",[56,442,443],{},"#1d4ed8",[56,445,446],{},"White text: 8.6:1",[15,448,449,452],{},[83,450,451],{},"Never rely on color alone"," to convey meaning. Pair every semantic color with an icon or text label so colorblind users can distinguish states.",[10,454,456],{"id":455},"dark-mode-contrast","Dark Mode Contrast",[15,458,459],{},"Dark mode inverts the contrast challenge. You're not making dark text readable on light backgrounds — you're making light text readable on dark ones.",[15,461,462],{},"Common dark mode mistakes:",[102,464,465,481,487],{},[105,466,467,282,470,473,474,476,477,480],{},[83,468,469],{},"Pure black backgrounds",[168,471,472],{},"#000000"," creates too harsh a contrast with white text (21:1), causing eye strain. Use ",[168,475,173],{}," or ",[168,478,479],{},"#1f2937"," instead.",[105,482,483,486],{},[83,484,485],{},"Desaturated colors",": Brand colors that work on white often appear to \"vibrate\" on dark backgrounds. Reduce saturation by 10–20% for dark mode variants.",[105,488,489,282,492,494,495,497],{},[83,490,491],{},"Low-contrast borders",[168,493,186],{}," borders on ",[168,496,170],{}," backgrounds often fail 3:1. Test explicitly.",[252,499,501],{"className":254,"code":500,"language":256,"meta":257,"style":257},".dark {\n  --bg-primary: #111827;\n  --text-primary: #f9fafb;    \u002F* Contrast: 17.4:1 *\u002F\n  --text-secondary: #d1d5db;  \u002F* Contrast: 12.5:1 *\u002F\n  --text-placeholder: #9ca3af; \u002F* Contrast: 7.1:1 *\u002F\n  --border: #374151;           \u002F* Contrast: 2.3:1 (decorative only) *\u002F\n}\n",[168,502,503,510,522,538,552,568,583],{"__ignoreMap":257},[261,504,505,508],{"class":263,"line":264},[261,506,507],{"class":267},".dark",[261,509,272],{"class":271},[261,511,512,515,517,519],{"class":263,"line":275},[261,513,514],{"class":278},"  --bg-primary",[261,516,282],{"class":271},[261,518,173],{"class":285},[261,520,521],{"class":271},";\n",[261,523,524,527,529,532,535],{"class":263,"line":296},[261,525,526],{"class":278},"  --text-primary",[261,528,282],{"class":271},[261,530,531],{"class":285},"#f9fafb",[261,533,534],{"class":271},";    ",[261,536,537],{"class":292},"\u002F* Contrast: 17.4:1 *\u002F\n",[261,539,540,543,545,547,549],{"class":263,"line":312},[261,541,542],{"class":278},"  --text-secondary",[261,544,282],{"class":271},[261,546,221],{"class":285},[261,548,289],{"class":271},[261,550,551],{"class":292},"\u002F* Contrast: 12.5:1 *\u002F\n",[261,553,554,557,559,562,565],{"class":263,"line":328},[261,555,556],{"class":278},"  --text-placeholder",[261,558,282],{"class":271},[261,560,561],{"class":285},"#9ca3af",[261,563,564],{"class":271},"; ",[261,566,567],{"class":292},"\u002F* Contrast: 7.1:1 *\u002F\n",[261,569,570,573,575,577,580],{"class":263,"line":334},[261,571,572],{"class":278},"  --border",[261,574,282],{"class":271},[261,576,189],{"class":285},[261,578,579],{"class":271},";           ",[261,581,582],{"class":292},"\u002F* Contrast: 2.3:1 (decorative only) *\u002F\n",[261,584,585],{"class":263,"line":341},[261,586,331],{"class":271},[10,588,590],{"id":589},"testing-your-palette","Testing Your Palette",[94,592,594],{"id":593},"automated-tools","Automated Tools",[102,596,597,603,609],{},[105,598,599,602],{},[83,600,601],{},"Browser DevTools",": Chrome and Firefox show contrast ratios in the color picker",[105,604,605,608],{},[83,606,607],{},"axe DevTools",": Scans entire pages for WCAG violations",[105,610,611,614],{},[83,612,613],{},"Adobe Color",": Accessibility tools for palette design",[94,616,618],{"id":617},"manual-testing-checklist","Manual Testing Checklist",[102,620,623,632,638,644,650,656],{"className":621},[622],"contains-task-list",[105,624,627,631],{"className":625},[626],"task-list-item",[628,629],"input",{"disabled":337,"type":630},"checkbox"," All text meets 4.5:1 contrast against its background",[105,633,635,637],{"className":634},[626],[628,636],{"disabled":337,"type":630}," Large text and UI elements meet 3:1 contrast",[105,639,641,643],{"className":640},[626],[628,642],{"disabled":337,"type":630}," Semantic colors are distinguishable under color vision deficiency simulation",[105,645,647,649],{"className":646},[626],[628,648],{"disabled":337,"type":630}," Focus indicators meet 3:1 contrast against adjacent colors",[105,651,653,655],{"className":652},[626],[628,654],{"disabled":337,"type":630}," Dark mode meets the same contrast thresholds",[105,657,659,661],{"className":658},[626],[628,660],{"disabled":337,"type":630}," Link text is distinguishable from surrounding body text (not just by color)",[10,663,665],{"id":664},"related-guides","Related Guides",[102,667,668,675,681],{},[105,669,670],{},[671,672,674],"a",{"href":673},"\u002Fguides\u002Fwcag-contrast-practical","WCAG Contrast Practical Guide",[105,676,677],{},[671,678,680],{"href":679},"\u002Fguides\u002Fcolor-palette-guide","Color Palette Guide",[105,682,683],{},[671,684,686],{"href":685},"\u002Fguides\u002Fcolor-harmony-theory","Color Harmony Theory",[10,688,690],{"id":689},"try-it-yourself","Try It Yourself",[15,692,693],{},"Build accessible color palettes with live contrast checking. Our tool shows WCAG compliance for every color pair as you design.",[15,695,696,697],{},"👉 ",[671,698,700],{"href":699},"\u002Ftools\u002Fcolor-palette",[83,701,702],{},"Color Palette Generator",[704,705,706],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":257,"searchDepth":275,"depth":275,"links":708},[709,710,713,718,719,723,724],{"id":12,"depth":275,"text":13},{"id":23,"depth":275,"text":24,"children":711},[712],{"id":96,"depth":296,"text":97},{"id":134,"depth":275,"text":135,"children":714},[715,716,717],{"id":138,"depth":296,"text":139},{"id":246,"depth":296,"text":247},{"id":366,"depth":296,"text":367},{"id":455,"depth":275,"text":456},{"id":589,"depth":275,"text":590,"children":720},[721,722],{"id":593,"depth":296,"text":594},{"id":617,"depth":296,"text":618},{"id":664,"depth":275,"text":665},{"id":689,"depth":275,"text":690},"2026-05-28","Create color systems that meet WCAG contrast requirements while staying visually cohesive.","md",{"immutable":337},"\u002Fguides\u002Faccessible-color-palettes",{"title":5,"description":726},"guides\u002Faccessible-color-palettes","NKvf_iM3lQ8qnssI5to_xWkYjQMkRCIa0hHNPc-ij7E",1780401331298]