[{"data":1,"prerenderedAt":714},["ShallowReactive",2],{"guide-accessibility-first-color-palettes":3},{"id":4,"title":5,"body":6,"date":701,"description":702,"extension":703,"meta":704,"navigation":708,"path":709,"readingTime":710,"seo":711,"stem":712,"__hash__":713},"guides\u002Fguides\u002Faccessibility-first-color-palettes.md","Accessibility-First Color Palettes: Designing for WCAG Compliance",{"type":7,"value":8,"toc":680},"minimark",[9,14,18,21,25,28,80,95,100,103,114,117,121,125,128,192,196,199,234,237,241,244,306,312,382,386,389,458,462,527,531,534,556,560,581,585,619,623,643,647,656,660,676],[10,11,13],"h2",{"id":12},"why-start-with-accessibility","Why Start with Accessibility",[15,16,17],"p",{},"Many teams pick colors for aesthetics first, then discover during QA that text contrast fails WCAG requirements. Fixing contrast after the fact means either darkening text (which changes the design intent) or reworking the entire palette.",[15,19,20],{},"An accessibility-first approach reverses this: start with colors that pass contrast checks, then refine aesthetically within those constraints. The result is a palette that looks good and works for everyone — including the estimated 300 million people worldwide with color vision deficiencies.",[10,22,24],{"id":23},"wcag-contrast-requirements","WCAG Contrast Requirements",[15,26,27],{},"WCAG 2.1 defines two conformance levels:",[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 (\u003C 18pt)",[38,45,46],{},"Large Text (≥ 18pt bold or ≥ 24pt)",[38,48,49],{},"UI Components",[51,52,53,67],"tbody",{},[35,54,55,59,62,65],{},[56,57,58],"td",{},"AA",[56,60,61],{},"4.5:1",[56,63,64],{},"3:1",[56,66,64],{},[35,68,69,72,75,77],{},[56,70,71],{},"AAA",[56,73,74],{},"7:1",[56,76,61],{},[56,78,79],{},"Not specified",[15,81,82,86,87,90,91,94],{},[83,84,85],"strong",{},"Normal text"," includes body copy, labels, and navigation links. ",[83,88,89],{},"Large text"," includes headings and prominent labels. ",[83,92,93],{},"UI components"," covers icons, form borders, and focus indicators.",[96,97,99],"h3",{"id":98},"contrast-ratio-explained","Contrast Ratio Explained",[15,101,102],{},"The contrast ratio compares the relative luminance of two colors:",[104,105,110],"pre",{"className":106,"code":108,"language":109},[107],"language-text","Ratio = (L1 + 0.05) \u002F (L2 + 0.05)\n","text",[111,112,108],"code",{"__ignoreMap":113},"",[15,115,116],{},"Where L1 is the lighter color and L2 is the darker color. Pure white (#FFFFFF) against pure black (#000000) gives a ratio of 21:1. Two similar grays might give 1.5:1.",[10,118,120],{"id":119},"building-an-accessible-palette-step-by-step","Building an Accessible Palette Step by Step",[96,122,124],{"id":123},"step-1-define-your-backgrounds","Step 1: Define Your Backgrounds",[15,126,127],{},"Start with your surface colors — these are fixed because layouts depend on them.",[104,129,133],{"className":130,"code":131,"language":132,"meta":113,"style":113},"language-css shiki shiki-themes github-light github-dark",":root {\n  --bg-primary: #FFFFFF;    \u002F* Light mode main background *\u002F\n  --bg-secondary: #F1F5F9;  \u002F* Light mode card background *\u002F\n}\n","css",[111,134,135,148,169,186],{"__ignoreMap":113},[136,137,140,144],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sScJk",":root",[136,145,147],{"class":146},"sVt8B"," {\n",[136,149,151,155,158,162,165],{"class":138,"line":150},2,[136,152,154],{"class":153},"s4XuR","  --bg-primary",[136,156,157],{"class":146},": ",[136,159,161],{"class":160},"sj4cs","#FFFFFF",[136,163,164],{"class":146},";    ",[136,166,168],{"class":167},"sJ8bj","\u002F* Light mode main background *\u002F\n",[136,170,172,175,177,180,183],{"class":138,"line":171},3,[136,173,174],{"class":153},"  --bg-secondary",[136,176,157],{"class":146},[136,178,179],{"class":160},"#F1F5F9",[136,181,182],{"class":146},";  ",[136,184,185],{"class":167},"\u002F* Light mode card background *\u002F\n",[136,187,189],{"class":138,"line":188},4,[136,190,191],{"class":146},"}\n",[96,193,195],{"id":194},"step-2-choose-text-colors-that-pass","Step 2: Choose Text Colors That Pass",[15,197,198],{},"For each background, calculate the darkest shade needed to reach 4.5:1:",[29,200,201,214],{},[32,202,203],{},[35,204,205,208,211],{},[38,206,207],{},"Background",[38,209,210],{},"Min AA Text",[38,212,213],{},"Example Passing Color",[51,215,216,225],{},[35,217,218,220,222],{},[56,219,161],{},[56,221,61],{},[56,223,224],{},"#57534A (ratio: 7.1:1)",[35,226,227,229,231],{},[56,228,179],{},[56,230,61],{},[56,232,233],{},"#475569 (ratio: 6.8:1)",[15,235,236],{},"Never rely on the minimum. Choose a text color that exceeds 4.5:1 to provide comfortable reading, not just barely passing.",[96,238,240],{"id":239},"step-3-add-accent-colors-with-contrast-verification","Step 3: Add Accent Colors with Contrast Verification",[15,242,243],{},"Accent colors (for links, buttons, badges) must contrast against their specific background:",[104,245,247],{"className":130,"code":246,"language":132,"meta":113,"style":113},":root {\n  --color-accent: #2563EB;   \u002F* Blue for links on white — ratio 4.6:1 ✓ *\u002F\n  --color-success: #16A34A;  \u002F* Green for badges — test against background *\u002F\n  --color-warning: #CA8A04;  \u002F* Yellow — often fails on white, needs dark text *\u002F\n}\n",[111,248,249,255,271,286,301],{"__ignoreMap":113},[136,250,251,253],{"class":138,"line":139},[136,252,143],{"class":142},[136,254,147],{"class":146},[136,256,257,260,262,265,268],{"class":138,"line":150},[136,258,259],{"class":153},"  --color-accent",[136,261,157],{"class":146},[136,263,264],{"class":160},"#2563EB",[136,266,267],{"class":146},";   ",[136,269,270],{"class":167},"\u002F* Blue for links on white — ratio 4.6:1 ✓ *\u002F\n",[136,272,273,276,278,281,283],{"class":138,"line":171},[136,274,275],{"class":153},"  --color-success",[136,277,157],{"class":146},[136,279,280],{"class":160},"#16A34A",[136,282,182],{"class":146},[136,284,285],{"class":167},"\u002F* Green for badges — test against background *\u002F\n",[136,287,288,291,293,296,298],{"class":138,"line":188},[136,289,290],{"class":153},"  --color-warning",[136,292,157],{"class":146},[136,294,295],{"class":160},"#CA8A04",[136,297,182],{"class":146},[136,299,300],{"class":167},"\u002F* Yellow — often fails on white, needs dark text *\u002F\n",[136,302,304],{"class":138,"line":303},5,[136,305,191],{"class":146},[15,307,308,309,311],{},"Yellow warnings are a notorious contrast trap. ",[111,310,295],{}," on white gives only 2.8:1 — failing AA for normal text. Use a dark text on the yellow background instead:",[104,313,315],{"className":130,"code":314,"language":132,"meta":113,"style":113},".badge-warning {\n  background-color: #FEF3C7;  \u002F* Light yellow *\u002F\n  color: #92400E;             \u002F* Dark amber text — ratio 7.5:1 ✓ *\u002F\n  border: 1px solid #F59E0B;\n}\n",[111,316,317,324,339,355,378],{"__ignoreMap":113},[136,318,319,322],{"class":138,"line":139},[136,320,321],{"class":142},".badge-warning",[136,323,147],{"class":146},[136,325,326,329,331,334,336],{"class":138,"line":150},[136,327,328],{"class":160},"  background-color",[136,330,157],{"class":146},[136,332,333],{"class":160},"#FEF3C7",[136,335,182],{"class":146},[136,337,338],{"class":167},"\u002F* Light yellow *\u002F\n",[136,340,341,344,346,349,352],{"class":138,"line":171},[136,342,343],{"class":160},"  color",[136,345,157],{"class":146},[136,347,348],{"class":160},"#92400E",[136,350,351],{"class":146},";             ",[136,353,354],{"class":167},"\u002F* Dark amber text — ratio 7.5:1 ✓ *\u002F\n",[136,356,357,360,362,365,369,372,375],{"class":138,"line":188},[136,358,359],{"class":160},"  border",[136,361,157],{"class":146},[136,363,364],{"class":160},"1",[136,366,368],{"class":367},"szBVR","px",[136,370,371],{"class":160}," solid",[136,373,374],{"class":160}," #F59E0B",[136,376,377],{"class":146},";\n",[136,379,380],{"class":138,"line":303},[136,381,191],{"class":146},[10,383,385],{"id":384},"dark-mode-accessibility","Dark Mode Accessibility",[15,387,388],{},"Dark mode is not simply inverting light mode colors. Contrast requirements still apply:",[104,390,392],{"className":130,"code":391,"language":132,"meta":113,"style":113},":root.dark {\n  --bg-primary: #0F172A;\n  --bg-secondary: #1E293B;\n  --text-primary: #F1F5F9;   \u002F* Ratio: 15.4:1 ✓ *\u002F\n  --text-secondary: #94A3B8; \u002F* Ratio: 5.6:1 ✓ *\u002F\n}\n",[111,393,394,401,412,423,437,453],{"__ignoreMap":113},[136,395,396,399],{"class":138,"line":139},[136,397,398],{"class":142},":root.dark",[136,400,147],{"class":146},[136,402,403,405,407,410],{"class":138,"line":150},[136,404,154],{"class":153},[136,406,157],{"class":146},[136,408,409],{"class":160},"#0F172A",[136,411,377],{"class":146},[136,413,414,416,418,421],{"class":138,"line":171},[136,415,174],{"class":153},[136,417,157],{"class":146},[136,419,420],{"class":160},"#1E293B",[136,422,377],{"class":146},[136,424,425,428,430,432,434],{"class":138,"line":188},[136,426,427],{"class":153},"  --text-primary",[136,429,157],{"class":146},[136,431,179],{"class":160},[136,433,267],{"class":146},[136,435,436],{"class":167},"\u002F* Ratio: 15.4:1 ✓ *\u002F\n",[136,438,439,442,444,447,450],{"class":138,"line":303},[136,440,441],{"class":153},"  --text-secondary",[136,443,157],{"class":146},[136,445,446],{"class":160},"#94A3B8",[136,448,449],{"class":146},"; ",[136,451,452],{"class":167},"\u002F* Ratio: 5.6:1 ✓ *\u002F\n",[136,454,456],{"class":138,"line":455},6,[136,457,191],{"class":146},[96,459,461],{"id":460},"common-dark-mode-mistakes","Common Dark Mode Mistakes",[29,463,464,477],{},[32,465,466],{},[35,467,468,471,474],{},[38,469,470],{},"Mistake",[38,472,473],{},"Why It Fails",[38,475,476],{},"Fix",[51,478,479,490,505,516],{},[35,480,481,484,487],{},[56,482,483],{},"Pure white (#FFF) text on dark bg",[56,485,486],{},"21:1 ratio creates glare, causes eye strain",[56,488,489],{},"Use off-white (#F1F5F9)",[35,491,492,499,502],{},[56,493,494,495,498],{},"Low-opacity text (",[111,496,497],{},"rgba(255,255,255,0.5)",")",[56,500,501],{},"Calculated ratio may fall below 4.5:1",[56,503,504],{},"Test actual rendered color",[35,506,507,510,513],{},[56,508,509],{},"Saturated accent on dark bg",[56,511,512],{},"Saturated colors vibrate against dark backgrounds",[56,514,515],{},"Desaturate slightly or lighten",[35,517,518,521,524],{},[56,519,520],{},"Same accent as light mode",[56,522,523],{},"Blue #2563EB on #0F172A = 2.3:1 ✗",[56,525,526],{},"Use #60A5FA — ratio 5.6:1 ✓",[10,528,530],{"id":529},"color-blindness-considerations","Color Blindness Considerations",[15,532,533],{},"Approximately 8% of men and 0.5% of women have some form of color vision deficiency. The most common types:",[535,536,537,544,550],"ul",{},[538,539,540,543],"li",{},[83,541,542],{},"Deuteranopia"," (red-green): Cannot distinguish red from green",[538,545,546,549],{},[83,547,548],{},"Protanopia"," (red-green): Reduced sensitivity to red light",[538,551,552,555],{},[83,553,554],{},"Tritanopia"," (blue-yellow): Cannot distinguish blue from yellow (rare)",[96,557,559],{"id":558},"design-rules","Design Rules",[561,562,563,569,575],"ol",{},[538,564,565,568],{},[83,566,567],{},"Never use color alone"," to convey information. Always pair with text, icons, or patterns.",[538,570,571,574],{},[83,572,573],{},"Avoid red\u002Fgreen for success\u002Ferror"," if they share similar luminance. Use shapes or labels as secondary indicators.",[538,576,577,580],{},[83,578,579],{},"Test your palette"," with a color blindness simulator. Free tools include Coblis and the built-in Chrome DevTools vision simulation.",[10,582,584],{"id":583},"testing-workflow","Testing Workflow",[561,586,587,593,599,613],{},[538,588,589,592],{},[83,590,591],{},"During design",": Use the Stark plugin (Figma\u002FSketch) to check contrast in real time",[538,594,595,598],{},[83,596,597],{},"During development",": Run axe-core or Lighthouse accessibility audits",[538,600,601,604,605,608,609,612],{},[83,602,603],{},"In CI",": Add ",[111,606,607],{},"pa11y"," or ",[111,610,611],{},"accessibility-checker"," to your pipeline",[538,614,615,618],{},[83,616,617],{},"Manual spot-check",": Use WebAIM Contrast Checker for borderline cases",[10,620,622],{"id":621},"key-takeaways","Key Takeaways",[535,624,625,628,631,634,637,640],{},[538,626,627],{},"Start with accessible contrast ratios rather than fixing them later",[538,629,630],{},"AA requires 4.5:1 for normal text, 3:1 for large text and UI components",[538,632,633],{},"Yellow and orange accents frequently fail on light backgrounds — use dark text on light fill instead",[538,635,636],{},"Dark mode needs its own contrast calculations — do not reuse light mode accent colors",[538,638,639],{},"Color should never be the only indicator of meaning — add icons, text, or patterns",[538,641,642],{},"Test with both automated tools and color blindness simulators",[10,644,646],{"id":645},"try-it-yourself","Try It Yourself",[15,648,649,650,655],{},"Build accessible palettes with built-in contrast checking using our ",[651,652,654],"a",{"href":653},"\u002Ftools\u002Fcolor-palette","Color Palette Generator",". It flags WCAG failures in real time as you adjust colors.",[10,657,659],{"id":658},"related-guides","Related Guides",[535,661,662,669],{},[538,663,664,668],{},[651,665,667],{"href":666},"\u002Fguides\u002Fcolor-palette-guide","Color Palette Guide"," — fundamentals of building harmonious palettes",[538,670,671,675],{},[651,672,674],{"href":673},"\u002Fguides\u002F60-30-10-color-rule-web-design","60-30-10 Color Rule for Web Design"," — applying proportion principles to accessible palettes",[677,678,679],"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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":113,"searchDepth":150,"depth":150,"links":681},[682,683,686,691,694,697,698,699,700],{"id":12,"depth":150,"text":13},{"id":23,"depth":150,"text":24,"children":684},[685],{"id":98,"depth":171,"text":99},{"id":119,"depth":150,"text":120,"children":687},[688,689,690],{"id":123,"depth":171,"text":124},{"id":194,"depth":171,"text":195},{"id":239,"depth":171,"text":240},{"id":384,"depth":150,"text":385,"children":692},[693],{"id":460,"depth":171,"text":461},{"id":529,"depth":150,"text":530,"children":695},[696],{"id":558,"depth":171,"text":559},{"id":583,"depth":150,"text":584},{"id":621,"depth":150,"text":622},{"id":645,"depth":150,"text":646},{"id":658,"depth":150,"text":659},"2026-05-28","Learn how to create color palettes that meet WCAG 2.1 AA contrast requirements from the start. Covers contrast ratios, dark mode, and practical testing workflows.","md",{"keywords":705,"immutable":708},[706,707],"color-palette","accessibility-first-color-palettes",true,"\u002Fguides\u002Faccessibility-first-color-palettes",7,{"title":5,"description":702},"guides\u002Faccessibility-first-color-palettes","ITi3e8OouPIae1NfE7N7ubXXRn1BCLWxi7wP1GhwboQ",1780401331259]