[{"data":1,"prerenderedAt":2252},["ShallowReactive",2],{"guide-wcag-contrast-practical":3},{"id":4,"title":5,"body":6,"date":2244,"description":2245,"extension":2246,"meta":2247,"navigation":460,"path":2248,"readingTime":464,"seo":2249,"stem":2250,"__hash__":2251},"guides\u002Fguides\u002Fwcag-contrast-practical.md","WCAG Color Contrast: Practical Guide with Real Examples",{"type":7,"value":8,"toc":2213},"minimark",[9,14,18,23,29,52,57,70,74,82,92,95,181,185,189,192,224,227,231,234,253,257,260,816,820,824,829,878,883,924,928,932,968,972,1053,1057,1062,1107,1110,1151,1155,1276,1280,1284,1326,1330,1437,1441,1444,1448,1518,1521,1525,1642,1646,1720,1724,1728,1782,1786,1789,1815,1945,1949,1952,1956,2075,2079,2189,2193,2209],[10,11,13],"h2",{"id":12},"understanding-wcag-contrast-requirements","Understanding WCAG Contrast Requirements",[15,16,17],"p",{},"Web Content Accessibility Guidelines (WCAG) define specific contrast ratio requirements to ensure text remains readable for users with visual impairments. These aren't arbitrary numbers—they're based on extensive research about what contrast levels people with different visual abilities can comfortably read.",[19,20,22],"h3",{"id":21},"the-official-standards","The Official Standards",[15,24,25],{},[26,27,28],"strong",{},"WCAG 2.1 AA (Minimum Compliance)",[30,31,32,40,46],"ul",{},[33,34,35,36,39],"li",{},"Normal text (below 18pt or 14pt bold): ",[26,37,38],{},"4.5:1"," minimum contrast ratio",[33,41,42,43,39],{},"Large text (18pt+ or 14pt+ bold): ",[26,44,45],{},"3:1",[33,47,48,49,51],{},"UI components and graphical objects: ",[26,50,45],{}," against adjacent colors",[15,53,54],{},[26,55,56],{},"WCAG 2.1 AAA (Enhanced Compliance)",[30,58,59,65],{},[33,60,61,62,39],{},"Normal text: ",[26,63,64],{},"7:1",[33,66,67,68,39],{},"Large text: ",[26,69,38],{},[19,71,73],{"id":72},"what-do-these-numbers-mean","What Do These Numbers Mean?",[15,75,76,77,81],{},"A contrast ratio of ",[78,79,80],"code",{},"X:1"," compares the relative luminance of two colors:",[83,84,89],"pre",{"className":85,"code":87,"language":88},[86],"language-text","Contrast Ratio = (L1 + 0.05) \u002F (L2 + 0.05)\n","text",[78,90,87],{"__ignoreMap":91},"",[15,93,94],{},"Where L1 is the lighter color's luminance and L2 is the darker color's luminance (both ranging from 0 to 1).",[96,97,98,114],"table",{},[99,100,101],"thead",{},[102,103,104,108,111],"tr",{},[105,106,107],"th",{},"Ratio",[105,109,110],{},"What It Looks Like",[105,112,113],{},"Use Case",[115,116,117,129,140,150,160,170],"tbody",{},[102,118,119,123,126],{},[120,121,122],"td",{},"1:1",[120,124,125],{},"Same color (invisible)",[120,127,128],{},"❌ Never use for text",[102,130,131,134,137],{},[120,132,133],{},"2:1",[120,135,136],{},"Barely distinguishable",[120,138,139],{},"❌ Fails for all text",[102,141,142,144,147],{},[120,143,45],{},[120,145,146],{},"Noticeable difference",[120,148,149],{},"✅ Large text only (AA)",[102,151,152,154,157],{},[120,153,38],{},[120,155,156],{},"Clear difference",[120,158,159],{},"✅ Normal text (AA)",[102,161,162,164,167],{},[120,163,64],{},[120,165,166],{},"Strong difference",[120,168,169],{},"✅ Normal text (AAA)",[102,171,172,175,178],{},[120,173,174],{},"21:1",[120,176,177],{},"Black on white",[120,179,180],{},"✅ Maximum contrast",[10,182,184],{"id":183},"how-to-calculate-contrast-ratios","How to Calculate Contrast Ratios",[19,186,188],{"id":187},"method-1-online-tools-recommended","Method 1: Online Tools (Recommended)",[15,190,191],{},"The easiest approach is using dedicated tools:",[30,193,194,206,215],{},[33,195,196,199,200],{},[26,197,198],{},"WebAIM Contrast Checker",": ",[201,202,203],"a",{"href":203,"rel":204},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[205],"nofollow",[33,207,208,199,211],{},[26,209,210],{},"Coolors Contrast Checker",[201,212,213],{"href":213,"rel":214},"https:\u002F\u002Fcoolors.co\u002Fcontrast-checker",[205],[33,216,217,199,220],{},[26,218,219],{},"Adobe Color Contrast Checker",[201,221,222],{"href":222,"rel":223},"https:\u002F\u002Fcolor.adobe.com\u002Fcreate\u002Fcolor-contrast-analyzer",[205],[15,225,226],{},"Simply input your foreground and background colors, and these tools instantly tell you the contrast ratio and WCAG compliance level.",[19,228,230],{"id":229},"method-2-browser-devtools","Method 2: Browser DevTools",[15,232,233],{},"Modern browsers include contrast checking in their DevTools:",[235,236,237,240,243,250],"ol",{},[33,238,239],{},"Open DevTools (F12)",[33,241,242],{},"Select an element with text",[33,244,245,246,249],{},"Look for the ",[26,247,248],{},"contrast ratio"," indicator in the Styles panel",[33,251,252],{},"Click it for detailed WCAG compliance information",[19,254,256],{"id":255},"method-3-programmatic-calculation","Method 3: Programmatic Calculation",[15,258,259],{},"For custom tools or build-time checking, here's the algorithm:",[83,261,265],{"className":262,"code":263,"language":264,"meta":91,"style":91},"language-javascript shiki shiki-themes github-light github-dark","function hexToRgb(hex) {\n  const result = \u002F^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\u002Fi.exec(hex)\n  return result ? {\n    r: parseInt(result[1], 16),\n    g: parseInt(result[2], 16),\n    b: parseInt(result[3], 16)\n  } : null\n}\n\nfunction relativeLuminance(r, g, b) {\n  const [rs, gs, bs] = [r, g, b].map(c => {\n    c = c \u002F 255\n    return c \u003C= 0.03928 ? c \u002F 12.92 : Math.pow((c + 0.055) \u002F 1.055, 2.4)\n  })\n  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs\n}\n\nfunction contrastRatio(color1, color2) {\n  const rgb1 = hexToRgb(color1)\n  const rgb2 = hexToRgb(color2)\n  \n  const l1 = relativeLuminance(rgb1.r, rgb1.g, rgb1.b)\n  const l2 = relativeLuminance(rgb2.r, rgb2.g, rgb2.b)\n  \n  const lighter = Math.max(l1, l2)\n  const darker = Math.min(l1, l2)\n  \n  return (lighter + 0.05) \u002F (darker + 0.05)\n}\n","javascript",[78,266,267,291,360,374,398,417,437,449,455,462,488,531,547,604,610,644,649,654,674,689,704,710,725,740,745,763,780,785,811],{"__ignoreMap":91},[268,269,272,276,280,284,288],"span",{"class":270,"line":271},"line",1,[268,273,275],{"class":274},"szBVR","function",[268,277,279],{"class":278},"sScJk"," hexToRgb",[268,281,283],{"class":282},"sVt8B","(",[268,285,287],{"class":286},"s4XuR","hex",[268,289,290],{"class":282},") {\n",[268,292,294,297,301,304,308,311,315,318,320,323,326,329,331,333,335,337,339,342,345,348,351,354,357],{"class":270,"line":293},2,[268,295,296],{"class":274},"  const",[268,298,300],{"class":299},"sj4cs"," result",[268,302,303],{"class":274}," =",[268,305,307],{"class":306},"sZZnC"," \u002F",[268,309,310],{"class":274},"^",[268,312,314],{"class":313},"sA_wV","#",[268,316,317],{"class":274},"?",[268,319,283],{"class":313},[268,321,322],{"class":299},"[a-f\\d]",[268,324,325],{"class":274},"{2}",[268,327,328],{"class":313},")(",[268,330,322],{"class":299},[268,332,325],{"class":274},[268,334,328],{"class":313},[268,336,322],{"class":299},[268,338,325],{"class":274},[268,340,341],{"class":313},")",[268,343,344],{"class":274},"$",[268,346,347],{"class":306},"\u002F",[268,349,350],{"class":274},"i",[268,352,353],{"class":282},".",[268,355,356],{"class":278},"exec",[268,358,359],{"class":282},"(hex)\n",[268,361,363,366,369,371],{"class":270,"line":362},3,[268,364,365],{"class":274},"  return",[268,367,368],{"class":282}," result ",[268,370,317],{"class":274},[268,372,373],{"class":282}," {\n",[268,375,377,380,383,386,389,392,395],{"class":270,"line":376},4,[268,378,379],{"class":282},"    r: ",[268,381,382],{"class":278},"parseInt",[268,384,385],{"class":282},"(result[",[268,387,388],{"class":299},"1",[268,390,391],{"class":282},"], ",[268,393,394],{"class":299},"16",[268,396,397],{"class":282},"),\n",[268,399,401,404,406,408,411,413,415],{"class":270,"line":400},5,[268,402,403],{"class":282},"    g: ",[268,405,382],{"class":278},[268,407,385],{"class":282},[268,409,410],{"class":299},"2",[268,412,391],{"class":282},[268,414,394],{"class":299},[268,416,397],{"class":282},[268,418,420,423,425,427,430,432,434],{"class":270,"line":419},6,[268,421,422],{"class":282},"    b: ",[268,424,382],{"class":278},[268,426,385],{"class":282},[268,428,429],{"class":299},"3",[268,431,391],{"class":282},[268,433,394],{"class":299},[268,435,436],{"class":282},")\n",[268,438,440,443,446],{"class":270,"line":439},7,[268,441,442],{"class":282},"  } ",[268,444,445],{"class":274},":",[268,447,448],{"class":299}," null\n",[268,450,452],{"class":270,"line":451},8,[268,453,454],{"class":282},"}\n",[268,456,458],{"class":270,"line":457},9,[268,459,461],{"emptyLinePlaceholder":460},true,"\n",[268,463,465,467,470,472,475,478,481,483,486],{"class":270,"line":464},10,[268,466,275],{"class":274},[268,468,469],{"class":278}," relativeLuminance",[268,471,283],{"class":282},[268,473,474],{"class":286},"r",[268,476,477],{"class":282},", ",[268,479,480],{"class":286},"g",[268,482,477],{"class":282},[268,484,485],{"class":286},"b",[268,487,290],{"class":282},[268,489,491,493,496,499,501,504,506,509,512,515,518,521,523,526,529],{"class":270,"line":490},11,[268,492,296],{"class":274},[268,494,495],{"class":282}," [",[268,497,498],{"class":299},"rs",[268,500,477],{"class":282},[268,502,503],{"class":299},"gs",[268,505,477],{"class":282},[268,507,508],{"class":299},"bs",[268,510,511],{"class":282},"] ",[268,513,514],{"class":274},"=",[268,516,517],{"class":282}," [r, g, b].",[268,519,520],{"class":278},"map",[268,522,283],{"class":282},[268,524,525],{"class":286},"c",[268,527,528],{"class":274}," =>",[268,530,373],{"class":282},[268,532,534,537,539,542,544],{"class":270,"line":533},12,[268,535,536],{"class":282},"    c ",[268,538,514],{"class":274},[268,540,541],{"class":282}," c ",[268,543,347],{"class":274},[268,545,546],{"class":299}," 255\n",[268,548,550,553,555,558,561,564,566,568,571,574,577,580,583,586,589,592,594,597,599,602],{"class":270,"line":549},13,[268,551,552],{"class":274},"    return",[268,554,541],{"class":282},[268,556,557],{"class":274},"\u003C=",[268,559,560],{"class":299}," 0.03928",[268,562,563],{"class":274}," ?",[268,565,541],{"class":282},[268,567,347],{"class":274},[268,569,570],{"class":299}," 12.92",[268,572,573],{"class":274}," :",[268,575,576],{"class":282}," Math.",[268,578,579],{"class":278},"pow",[268,581,582],{"class":282},"((c ",[268,584,585],{"class":274},"+",[268,587,588],{"class":299}," 0.055",[268,590,591],{"class":282},") ",[268,593,347],{"class":274},[268,595,596],{"class":299}," 1.055",[268,598,477],{"class":282},[268,600,601],{"class":299},"2.4",[268,603,436],{"class":282},[268,605,607],{"class":270,"line":606},14,[268,608,609],{"class":282},"  })\n",[268,611,613,615,618,621,624,626,629,631,634,636,639,641],{"class":270,"line":612},15,[268,614,365],{"class":274},[268,616,617],{"class":299}," 0.2126",[268,619,620],{"class":274}," *",[268,622,623],{"class":282}," rs ",[268,625,585],{"class":274},[268,627,628],{"class":299}," 0.7152",[268,630,620],{"class":274},[268,632,633],{"class":282}," gs ",[268,635,585],{"class":274},[268,637,638],{"class":299}," 0.0722",[268,640,620],{"class":274},[268,642,643],{"class":282}," bs\n",[268,645,647],{"class":270,"line":646},16,[268,648,454],{"class":282},[268,650,652],{"class":270,"line":651},17,[268,653,461],{"emptyLinePlaceholder":460},[268,655,657,659,662,664,667,669,672],{"class":270,"line":656},18,[268,658,275],{"class":274},[268,660,661],{"class":278}," contrastRatio",[268,663,283],{"class":282},[268,665,666],{"class":286},"color1",[268,668,477],{"class":282},[268,670,671],{"class":286},"color2",[268,673,290],{"class":282},[268,675,677,679,682,684,686],{"class":270,"line":676},19,[268,678,296],{"class":274},[268,680,681],{"class":299}," rgb1",[268,683,303],{"class":274},[268,685,279],{"class":278},[268,687,688],{"class":282},"(color1)\n",[268,690,692,694,697,699,701],{"class":270,"line":691},20,[268,693,296],{"class":274},[268,695,696],{"class":299}," rgb2",[268,698,303],{"class":274},[268,700,279],{"class":278},[268,702,703],{"class":282},"(color2)\n",[268,705,707],{"class":270,"line":706},21,[268,708,709],{"class":282},"  \n",[268,711,713,715,718,720,722],{"class":270,"line":712},22,[268,714,296],{"class":274},[268,716,717],{"class":299}," l1",[268,719,303],{"class":274},[268,721,469],{"class":278},[268,723,724],{"class":282},"(rgb1.r, rgb1.g, rgb1.b)\n",[268,726,728,730,733,735,737],{"class":270,"line":727},23,[268,729,296],{"class":274},[268,731,732],{"class":299}," l2",[268,734,303],{"class":274},[268,736,469],{"class":278},[268,738,739],{"class":282},"(rgb2.r, rgb2.g, rgb2.b)\n",[268,741,743],{"class":270,"line":742},24,[268,744,709],{"class":282},[268,746,748,750,753,755,757,760],{"class":270,"line":747},25,[268,749,296],{"class":274},[268,751,752],{"class":299}," lighter",[268,754,303],{"class":274},[268,756,576],{"class":282},[268,758,759],{"class":278},"max",[268,761,762],{"class":282},"(l1, l2)\n",[268,764,766,768,771,773,775,778],{"class":270,"line":765},26,[268,767,296],{"class":274},[268,769,770],{"class":299}," darker",[268,772,303],{"class":274},[268,774,576],{"class":282},[268,776,777],{"class":278},"min",[268,779,762],{"class":282},[268,781,783],{"class":270,"line":782},27,[268,784,709],{"class":282},[268,786,788,790,793,795,798,800,802,805,807,809],{"class":270,"line":787},28,[268,789,365],{"class":274},[268,791,792],{"class":282}," (lighter ",[268,794,585],{"class":274},[268,796,797],{"class":299}," 0.05",[268,799,591],{"class":282},[268,801,347],{"class":274},[268,803,804],{"class":282}," (darker ",[268,806,585],{"class":274},[268,808,797],{"class":299},[268,810,436],{"class":282},[268,812,814],{"class":270,"line":813},29,[268,815,454],{"class":282},[10,817,819],{"id":818},"common-contrast-failures-and-fixes","Common Contrast Failures and Fixes",[19,821,823],{"id":822},"failure-1-gray-text-on-white-background","Failure 1: Gray Text on White Background",[15,825,826],{},[26,827,828],{},"The Problem:",[83,830,834],{"className":831,"code":832,"language":833,"meta":91,"style":91},"language-css shiki shiki-themes github-light github-dark","\u002F* ❌ FAILS: 3.13:1 contrast ratio - fails AA for normal text *\u002F\n.subtle-text {\n  color: #888888;\n  background-color: #ffffff;\n}\n","css",[78,835,836,842,849,862,874],{"__ignoreMap":91},[268,837,838],{"class":270,"line":271},[268,839,841],{"class":840},"sJ8bj","\u002F* ❌ FAILS: 3.13:1 contrast ratio - fails AA for normal text *\u002F\n",[268,843,844,847],{"class":270,"line":293},[268,845,846],{"class":278},".subtle-text",[268,848,373],{"class":282},[268,850,851,854,856,859],{"class":270,"line":362},[268,852,853],{"class":299},"  color",[268,855,199],{"class":282},[268,857,858],{"class":299},"#888888",[268,860,861],{"class":282},";\n",[268,863,864,867,869,872],{"class":270,"line":376},[268,865,866],{"class":299},"  background-color",[268,868,199],{"class":282},[268,870,871],{"class":299},"#ffffff",[268,873,861],{"class":282},[268,875,876],{"class":270,"line":400},[268,877,454],{"class":282},[15,879,880],{},[26,881,882],{},"The Fix:",[83,884,886],{"className":831,"code":885,"language":833,"meta":91,"style":91},"\u002F* ✅ PASSES: 5.74:1 contrast ratio - passes AA *\u002F\n.subtle-text {\n  color: #595959;\n  background-color: #ffffff;\n}\n",[78,887,888,893,899,910,920],{"__ignoreMap":91},[268,889,890],{"class":270,"line":271},[268,891,892],{"class":840},"\u002F* ✅ PASSES: 5.74:1 contrast ratio - passes AA *\u002F\n",[268,894,895,897],{"class":270,"line":293},[268,896,846],{"class":278},[268,898,373],{"class":282},[268,900,901,903,905,908],{"class":270,"line":362},[268,902,853],{"class":299},[268,904,199],{"class":282},[268,906,907],{"class":299},"#595959",[268,909,861],{"class":282},[268,911,912,914,916,918],{"class":270,"line":376},[268,913,866],{"class":299},[268,915,199],{"class":282},[268,917,871],{"class":299},[268,919,861],{"class":282},[268,921,922],{"class":270,"line":400},[268,923,454],{"class":282},[19,925,927],{"id":926},"failure-2-placeholder-text-too-light","Failure 2: Placeholder Text Too Light",[15,929,930],{},[26,931,828],{},[83,933,935],{"className":831,"code":934,"language":833,"meta":91,"style":91},"\u002F* ❌ FAILS: 2.1:1 - barely visible *\u002F\ninput::placeholder {\n  color: #c0c0c0;\n}\n",[78,936,937,942,953,964],{"__ignoreMap":91},[268,938,939],{"class":270,"line":271},[268,940,941],{"class":840},"\u002F* ❌ FAILS: 2.1:1 - barely visible *\u002F\n",[268,943,944,948,951],{"class":270,"line":293},[268,945,947],{"class":946},"s9eBZ","input",[268,949,950],{"class":278},"::placeholder",[268,952,373],{"class":282},[268,954,955,957,959,962],{"class":270,"line":362},[268,956,853],{"class":299},[268,958,199],{"class":282},[268,960,961],{"class":299},"#c0c0c0",[268,963,861],{"class":282},[268,965,966],{"class":270,"line":376},[268,967,454],{"class":282},[15,969,970],{},[26,971,882],{},[83,973,975],{"className":831,"code":974,"language":833,"meta":91,"style":91},"\u002F* ✅ PASSES: 4.6:1 - meets AA *\u002F\ninput::placeholder {\n  color: #757575;\n}\n\n\u002F* Or use opacity for native feel *\u002F\ninput::placeholder {\n  color: #000000;\n  opacity: 0.6; \u002F* Equivalent to ~#666 on white *\u002F\n}\n",[78,976,977,982,990,1001,1005,1009,1014,1022,1033,1049],{"__ignoreMap":91},[268,978,979],{"class":270,"line":271},[268,980,981],{"class":840},"\u002F* ✅ PASSES: 4.6:1 - meets AA *\u002F\n",[268,983,984,986,988],{"class":270,"line":293},[268,985,947],{"class":946},[268,987,950],{"class":278},[268,989,373],{"class":282},[268,991,992,994,996,999],{"class":270,"line":362},[268,993,853],{"class":299},[268,995,199],{"class":282},[268,997,998],{"class":299},"#757575",[268,1000,861],{"class":282},[268,1002,1003],{"class":270,"line":376},[268,1004,454],{"class":282},[268,1006,1007],{"class":270,"line":400},[268,1008,461],{"emptyLinePlaceholder":460},[268,1010,1011],{"class":270,"line":419},[268,1012,1013],{"class":840},"\u002F* Or use opacity for native feel *\u002F\n",[268,1015,1016,1018,1020],{"class":270,"line":439},[268,1017,947],{"class":946},[268,1019,950],{"class":278},[268,1021,373],{"class":282},[268,1023,1024,1026,1028,1031],{"class":270,"line":451},[268,1025,853],{"class":299},[268,1027,199],{"class":282},[268,1029,1030],{"class":299},"#000000",[268,1032,861],{"class":282},[268,1034,1035,1038,1040,1043,1046],{"class":270,"line":457},[268,1036,1037],{"class":299},"  opacity",[268,1039,199],{"class":282},[268,1041,1042],{"class":299},"0.6",[268,1044,1045],{"class":282},"; ",[268,1047,1048],{"class":840},"\u002F* Equivalent to ~#666 on white *\u002F\n",[268,1050,1051],{"class":270,"line":464},[268,1052,454],{"class":282},[19,1054,1056],{"id":1055},"failure-3-brand-colors-on-white","Failure 3: Brand Colors on White",[15,1058,1059,1061],{},[26,1060,828],{},"\nMany brand colors fail contrast when placed directly on white:",[83,1063,1065],{"className":831,"code":1064,"language":833,"meta":91,"style":91},"\u002F* ❌ FAILS: 2.4:1 - your beautiful brand blue *\u002F\n.brand-button {\n  background-color: #3b82f6;\n  color: #ffffff; \u002F* White text on blue *\u002F\n}\n",[78,1066,1067,1072,1079,1090,1103],{"__ignoreMap":91},[268,1068,1069],{"class":270,"line":271},[268,1070,1071],{"class":840},"\u002F* ❌ FAILS: 2.4:1 - your beautiful brand blue *\u002F\n",[268,1073,1074,1077],{"class":270,"line":293},[268,1075,1076],{"class":278},".brand-button",[268,1078,373],{"class":282},[268,1080,1081,1083,1085,1088],{"class":270,"line":362},[268,1082,866],{"class":299},[268,1084,199],{"class":282},[268,1086,1087],{"class":299},"#3b82f6",[268,1089,861],{"class":282},[268,1091,1092,1094,1096,1098,1100],{"class":270,"line":376},[268,1093,853],{"class":299},[268,1095,199],{"class":282},[268,1097,871],{"class":299},[268,1099,1045],{"class":282},[268,1101,1102],{"class":840},"\u002F* White text on blue *\u002F\n",[268,1104,1105],{"class":270,"line":400},[268,1106,454],{"class":282},[15,1108,1109],{},"Wait—that actually passes! But what about the reverse?",[83,1111,1113],{"className":831,"code":1112,"language":833,"meta":91,"style":91},"\u002F* ❌ FAILS: 2.4:1 - brand blue text on white *\u002F\n.brand-link {\n  color: #3b82f6;\n  background-color: #ffffff;\n}\n",[78,1114,1115,1120,1127,1137,1147],{"__ignoreMap":91},[268,1116,1117],{"class":270,"line":271},[268,1118,1119],{"class":840},"\u002F* ❌ FAILS: 2.4:1 - brand blue text on white *\u002F\n",[268,1121,1122,1125],{"class":270,"line":293},[268,1123,1124],{"class":278},".brand-link",[268,1126,373],{"class":282},[268,1128,1129,1131,1133,1135],{"class":270,"line":362},[268,1130,853],{"class":299},[268,1132,199],{"class":282},[268,1134,1087],{"class":299},[268,1136,861],{"class":282},[268,1138,1139,1141,1143,1145],{"class":270,"line":376},[268,1140,866],{"class":299},[268,1142,199],{"class":282},[268,1144,871],{"class":299},[268,1146,861],{"class":282},[268,1148,1149],{"class":270,"line":400},[268,1150,454],{"class":282},[15,1152,1153],{},[26,1154,882],{},[83,1156,1158],{"className":831,"code":1157,"language":833,"meta":91,"style":91},"\u002F* ✅ PASSES: 5.74:1 - use darker shade of brand *\u002F\n.brand-link {\n  color: #1d4ed8; \u002F* brand-700 instead of brand-500 *\u002F\n  background-color: #ffffff;\n}\n\n\u002F* Alternative: Add a background *\u002F\n.brand-link-alt {\n  color: #3b82f6;\n  background-color: #eff6ff; \u002F* brand-50 *\u002F\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n",[78,1159,1160,1165,1171,1185,1195,1199,1203,1208,1215,1225,1239,1258,1272],{"__ignoreMap":91},[268,1161,1162],{"class":270,"line":271},[268,1163,1164],{"class":840},"\u002F* ✅ PASSES: 5.74:1 - use darker shade of brand *\u002F\n",[268,1166,1167,1169],{"class":270,"line":293},[268,1168,1124],{"class":278},[268,1170,373],{"class":282},[268,1172,1173,1175,1177,1180,1182],{"class":270,"line":362},[268,1174,853],{"class":299},[268,1176,199],{"class":282},[268,1178,1179],{"class":299},"#1d4ed8",[268,1181,1045],{"class":282},[268,1183,1184],{"class":840},"\u002F* brand-700 instead of brand-500 *\u002F\n",[268,1186,1187,1189,1191,1193],{"class":270,"line":376},[268,1188,866],{"class":299},[268,1190,199],{"class":282},[268,1192,871],{"class":299},[268,1194,861],{"class":282},[268,1196,1197],{"class":270,"line":400},[268,1198,454],{"class":282},[268,1200,1201],{"class":270,"line":419},[268,1202,461],{"emptyLinePlaceholder":460},[268,1204,1205],{"class":270,"line":439},[268,1206,1207],{"class":840},"\u002F* Alternative: Add a background *\u002F\n",[268,1209,1210,1213],{"class":270,"line":451},[268,1211,1212],{"class":278},".brand-link-alt",[268,1214,373],{"class":282},[268,1216,1217,1219,1221,1223],{"class":270,"line":457},[268,1218,853],{"class":299},[268,1220,199],{"class":282},[268,1222,1087],{"class":299},[268,1224,861],{"class":282},[268,1226,1227,1229,1231,1234,1236],{"class":270,"line":464},[268,1228,866],{"class":299},[268,1230,199],{"class":282},[268,1232,1233],{"class":299},"#eff6ff",[268,1235,1045],{"class":282},[268,1237,1238],{"class":840},"\u002F* brand-50 *\u002F\n",[268,1240,1241,1244,1246,1248,1251,1254,1256],{"class":270,"line":490},[268,1242,1243],{"class":299},"  padding",[268,1245,199],{"class":282},[268,1247,410],{"class":299},[268,1249,1250],{"class":274},"px",[268,1252,1253],{"class":299}," 6",[268,1255,1250],{"class":274},[268,1257,861],{"class":282},[268,1259,1260,1263,1265,1268,1270],{"class":270,"line":533},[268,1261,1262],{"class":299},"  border-radius",[268,1264,199],{"class":282},[268,1266,1267],{"class":299},"4",[268,1269,1250],{"class":274},[268,1271,861],{"class":282},[268,1273,1274],{"class":270,"line":549},[268,1275,454],{"class":282},[19,1277,1279],{"id":1278},"failure-4-disabled-state-invisible","Failure 4: Disabled State Invisible",[15,1281,1282],{},[26,1283,828],{},[83,1285,1287],{"className":831,"code":1286,"language":833,"meta":91,"style":91},"\u002F* ❌ FAILS: 1.9:1 - too light to read *\u002F\n.button-disabled {\n  color: #d1d5db;\n  background-color: #ffffff;\n}\n",[78,1288,1289,1294,1301,1312,1322],{"__ignoreMap":91},[268,1290,1291],{"class":270,"line":271},[268,1292,1293],{"class":840},"\u002F* ❌ FAILS: 1.9:1 - too light to read *\u002F\n",[268,1295,1296,1299],{"class":270,"line":293},[268,1297,1298],{"class":278},".button-disabled",[268,1300,373],{"class":282},[268,1302,1303,1305,1307,1310],{"class":270,"line":362},[268,1304,853],{"class":299},[268,1306,199],{"class":282},[268,1308,1309],{"class":299},"#d1d5db",[268,1311,861],{"class":282},[268,1313,1314,1316,1318,1320],{"class":270,"line":376},[268,1315,866],{"class":299},[268,1317,199],{"class":282},[268,1319,871],{"class":299},[268,1321,861],{"class":282},[268,1323,1324],{"class":270,"line":400},[268,1325,454],{"class":282},[15,1327,1328],{},[26,1329,882],{},[83,1331,1333],{"className":831,"code":1332,"language":833,"meta":91,"style":91},"\u002F* ✅ PASSES: 3.1:1 - still meets large text standard *\u002F\n.button-disabled {\n  color: #9ca3af; \u002F* gray-400 *\u002F\n  background-color: #f9fafb; \u002F* gray-50 *\u002F\n  cursor: not-allowed;\n}\n\n\u002F* Even better: add a pattern or icon *\u002F\n.button-disabled::after {\n  content: \" (disabled)\";\n  font-size: 0.85em;\n}\n",[78,1334,1335,1340,1346,1360,1374,1386,1390,1394,1399,1406,1418,1433],{"__ignoreMap":91},[268,1336,1337],{"class":270,"line":271},[268,1338,1339],{"class":840},"\u002F* ✅ PASSES: 3.1:1 - still meets large text standard *\u002F\n",[268,1341,1342,1344],{"class":270,"line":293},[268,1343,1298],{"class":278},[268,1345,373],{"class":282},[268,1347,1348,1350,1352,1355,1357],{"class":270,"line":362},[268,1349,853],{"class":299},[268,1351,199],{"class":282},[268,1353,1354],{"class":299},"#9ca3af",[268,1356,1045],{"class":282},[268,1358,1359],{"class":840},"\u002F* gray-400 *\u002F\n",[268,1361,1362,1364,1366,1369,1371],{"class":270,"line":376},[268,1363,866],{"class":299},[268,1365,199],{"class":282},[268,1367,1368],{"class":299},"#f9fafb",[268,1370,1045],{"class":282},[268,1372,1373],{"class":840},"\u002F* gray-50 *\u002F\n",[268,1375,1376,1379,1381,1384],{"class":270,"line":400},[268,1377,1378],{"class":299},"  cursor",[268,1380,199],{"class":282},[268,1382,1383],{"class":299},"not-allowed",[268,1385,861],{"class":282},[268,1387,1388],{"class":270,"line":419},[268,1389,454],{"class":282},[268,1391,1392],{"class":270,"line":439},[268,1393,461],{"emptyLinePlaceholder":460},[268,1395,1396],{"class":270,"line":451},[268,1397,1398],{"class":840},"\u002F* Even better: add a pattern or icon *\u002F\n",[268,1400,1401,1404],{"class":270,"line":457},[268,1402,1403],{"class":278},".button-disabled::after",[268,1405,373],{"class":282},[268,1407,1408,1411,1413,1416],{"class":270,"line":464},[268,1409,1410],{"class":299},"  content",[268,1412,199],{"class":282},[268,1414,1415],{"class":306},"\" (disabled)\"",[268,1417,861],{"class":282},[268,1419,1420,1423,1425,1428,1431],{"class":270,"line":490},[268,1421,1422],{"class":299},"  font-size",[268,1424,199],{"class":282},[268,1426,1427],{"class":299},"0.85",[268,1429,1430],{"class":274},"em",[268,1432,861],{"class":282},[268,1434,1435],{"class":270,"line":533},[268,1436,454],{"class":282},[10,1438,1440],{"id":1439},"dark-mode-a-special-challenge","Dark Mode: A Special Challenge",[15,1442,1443],{},"Dark mode introduces unique contrast challenges. What works on white often fails on near-black backgrounds.",[19,1445,1447],{"id":1446},"the-problem-with-direct-inversion","The Problem with Direct Inversion",[83,1449,1451],{"className":831,"code":1450,"language":833,"meta":91,"style":91},"\u002F* Light mode - PASSES: 12.6:1 *\u002F\n.text-light { color: #1f2937; background: #ffffff; }\n\n\u002F* Direct inversion - FAILS: 2.8:1 *\u002F\n.text-dark { color: #d1d5db; background: #000000; }\n",[78,1452,1453,1458,1486,1490,1495],{"__ignoreMap":91},[268,1454,1455],{"class":270,"line":271},[268,1456,1457],{"class":840},"\u002F* Light mode - PASSES: 12.6:1 *\u002F\n",[268,1459,1460,1463,1466,1469,1471,1474,1476,1479,1481,1483],{"class":270,"line":293},[268,1461,1462],{"class":278},".text-light",[268,1464,1465],{"class":282}," { ",[268,1467,1468],{"class":299},"color",[268,1470,199],{"class":282},[268,1472,1473],{"class":299},"#1f2937",[268,1475,1045],{"class":282},[268,1477,1478],{"class":299},"background",[268,1480,199],{"class":282},[268,1482,871],{"class":299},[268,1484,1485],{"class":282},"; }\n",[268,1487,1488],{"class":270,"line":362},[268,1489,461],{"emptyLinePlaceholder":460},[268,1491,1492],{"class":270,"line":376},[268,1493,1494],{"class":840},"\u002F* Direct inversion - FAILS: 2.8:1 *\u002F\n",[268,1496,1497,1500,1502,1504,1506,1508,1510,1512,1514,1516],{"class":270,"line":400},[268,1498,1499],{"class":278},".text-dark",[268,1501,1465],{"class":282},[268,1503,1468],{"class":299},[268,1505,199],{"class":282},[268,1507,1309],{"class":299},[268,1509,1045],{"class":282},[268,1511,1478],{"class":299},[268,1513,199],{"class":282},[268,1515,1030],{"class":299},[268,1517,1485],{"class":282},[15,1519,1520],{},"The light gray that looked fine on white becomes invisible on black!",[19,1522,1524],{"id":1523},"the-solution-use-different-shades","The Solution: Use Different Shades",[83,1526,1528],{"className":831,"code":1527,"language":833,"meta":91,"style":91},"\u002F* Light mode *\u002F\n@media (prefers-color-scheme: light) {\n  .text {\n    color: #1f2937; \u002F* gray-800 *\u002F\n    background-color: #ffffff;\n  }\n}\n\n\u002F* Dark mode - use lighter shade *\u002F\n@media (prefers-color-scheme: dark) {\n  .text {\n    color: #f3f4f6; \u002F* gray-100 *\u002F\n    background-color: #111827; \u002F* gray-900 *\u002F\n  }\n}\n",[78,1529,1530,1535,1543,1550,1564,1575,1580,1584,1588,1593,1600,1606,1620,1634,1638],{"__ignoreMap":91},[268,1531,1532],{"class":270,"line":271},[268,1533,1534],{"class":840},"\u002F* Light mode *\u002F\n",[268,1536,1537,1540],{"class":270,"line":293},[268,1538,1539],{"class":274},"@media",[268,1541,1542],{"class":282}," (prefers-color-scheme: light) {\n",[268,1544,1545,1548],{"class":270,"line":362},[268,1546,1547],{"class":278},"  .text",[268,1549,373],{"class":282},[268,1551,1552,1555,1557,1559,1561],{"class":270,"line":376},[268,1553,1554],{"class":299},"    color",[268,1556,199],{"class":282},[268,1558,1473],{"class":299},[268,1560,1045],{"class":282},[268,1562,1563],{"class":840},"\u002F* gray-800 *\u002F\n",[268,1565,1566,1569,1571,1573],{"class":270,"line":400},[268,1567,1568],{"class":299},"    background-color",[268,1570,199],{"class":282},[268,1572,871],{"class":299},[268,1574,861],{"class":282},[268,1576,1577],{"class":270,"line":419},[268,1578,1579],{"class":282},"  }\n",[268,1581,1582],{"class":270,"line":439},[268,1583,454],{"class":282},[268,1585,1586],{"class":270,"line":451},[268,1587,461],{"emptyLinePlaceholder":460},[268,1589,1590],{"class":270,"line":457},[268,1591,1592],{"class":840},"\u002F* Dark mode - use lighter shade *\u002F\n",[268,1594,1595,1597],{"class":270,"line":464},[268,1596,1539],{"class":274},[268,1598,1599],{"class":282}," (prefers-color-scheme: dark) {\n",[268,1601,1602,1604],{"class":270,"line":490},[268,1603,1547],{"class":278},[268,1605,373],{"class":282},[268,1607,1608,1610,1612,1615,1617],{"class":270,"line":533},[268,1609,1554],{"class":299},[268,1611,199],{"class":282},[268,1613,1614],{"class":299},"#f3f4f6",[268,1616,1045],{"class":282},[268,1618,1619],{"class":840},"\u002F* gray-100 *\u002F\n",[268,1621,1622,1624,1626,1629,1631],{"class":270,"line":549},[268,1623,1568],{"class":299},[268,1625,199],{"class":282},[268,1627,1628],{"class":299},"#111827",[268,1630,1045],{"class":282},[268,1632,1633],{"class":840},"\u002F* gray-900 *\u002F\n",[268,1635,1636],{"class":270,"line":606},[268,1637,1579],{"class":282},[268,1639,1640],{"class":270,"line":612},[268,1641,454],{"class":282},[19,1643,1645],{"id":1644},"dark-mode-contrast-ratios-to-target","Dark Mode Contrast Ratios to Target",[96,1647,1648,1663],{},[99,1649,1650],{},[102,1651,1652,1654,1657,1660],{},[105,1653,113],{},[105,1655,1656],{},"Light Mode",[105,1658,1659],{},"Dark Mode",[105,1661,1662],{},"Target Ratio",[115,1664,1665,1679,1693,1707],{},[102,1666,1667,1670,1673,1676],{},[120,1668,1669],{},"Body text",[120,1671,1672],{},"gray-800 on white",[120,1674,1675],{},"gray-100 on gray-900",[120,1677,1678],{},"7:1+",[102,1680,1681,1684,1687,1690],{},[120,1682,1683],{},"Secondary text",[120,1685,1686],{},"gray-600 on white",[120,1688,1689],{},"gray-300 on gray-900",[120,1691,1692],{},"4.5:1+",[102,1694,1695,1698,1701,1704],{},[120,1696,1697],{},"Subtle text",[120,1699,1700],{},"gray-500 on white",[120,1702,1703],{},"gray-400 on gray-900",[120,1705,1706],{},"3:1+",[102,1708,1709,1712,1715,1718],{},[120,1710,1711],{},"White text on dark",[120,1713,1714],{},"white on gray-800",[120,1716,1717],{},"white on gray-900",[120,1719,1692],{},[10,1721,1723],{"id":1722},"testing-your-color-combinations","Testing Your Color Combinations",[19,1725,1727],{"id":1726},"manual-testing-checklist","Manual Testing Checklist",[30,1729,1732,1740,1746,1752,1758,1764,1770,1776],{"className":1730},[1731],"contains-task-list",[33,1733,1736,1739],{"className":1734},[1735],"task-list-item",[947,1737],{"disabled":460,"type":1738},"checkbox"," Test all text\u002Fbackground combinations",[33,1741,1743,1745],{"className":1742},[1735],[947,1744],{"disabled":460,"type":1738}," Test hover, focus, and active states",[33,1747,1749,1751],{"className":1748},[1735],[947,1750],{"disabled":460,"type":1738}," Test disabled states",[33,1753,1755,1757],{"className":1754},[1735],[947,1756],{"disabled":460,"type":1738}," Test in both light and dark mode",[33,1759,1761,1763],{"className":1760},[1735],[947,1762],{"disabled":460,"type":1738}," Test with Windows High Contrast Mode",[33,1765,1767,1769],{"className":1766},[1735],[947,1768],{"disabled":460,"type":1738}," Test placeholders and input text",[33,1771,1773,1775],{"className":1772},[1735],[947,1774],{"disabled":460,"type":1738}," Test link colors (visited and unvisited)",[33,1777,1779,1781],{"className":1778},[1735],[947,1780],{"disabled":460,"type":1738}," Test error, warning, and success messages",[19,1783,1785],{"id":1784},"automated-testing-tools","Automated Testing Tools",[15,1787,1788],{},"Add these to your workflow:",[235,1790,1791,1797,1803,1809],{},[33,1792,1793,1796],{},[26,1794,1795],{},"axe DevTools"," (Browser Extension): Runs comprehensive accessibility audits",[33,1798,1799,1802],{},[26,1800,1801],{},"Lighthouse"," (Built into Chrome): Includes accessibility scoring",[33,1804,1805,1808],{},[26,1806,1807],{},"Pa11y"," (CI\u002FCD): Command-line accessibility testing",[33,1810,1811,1814],{},[26,1812,1813],{},"jest-axe"," (Unit Tests): Test contrast in your component tests",[83,1816,1818],{"className":262,"code":1817,"language":264,"meta":91,"style":91},"\u002F\u002F Example with jest-axe\nimport { axe, toHaveNoViolations } from 'jest-axe'\nexpect.extend(toHaveNoViolations)\n\ntest('button has sufficient contrast', async () => {\n  const { container } = render(\u003CButton>Click me\u003C\u002FButton>)\n  const results = await axe(container)\n  expect(results).toHaveNoViolations()\n})\n",[78,1819,1820,1825,1839,1850,1854,1877,1908,1926,1940],{"__ignoreMap":91},[268,1821,1822],{"class":270,"line":271},[268,1823,1824],{"class":840},"\u002F\u002F Example with jest-axe\n",[268,1826,1827,1830,1833,1836],{"class":270,"line":293},[268,1828,1829],{"class":274},"import",[268,1831,1832],{"class":282}," { axe, toHaveNoViolations } ",[268,1834,1835],{"class":274},"from",[268,1837,1838],{"class":306}," 'jest-axe'\n",[268,1840,1841,1844,1847],{"class":270,"line":362},[268,1842,1843],{"class":282},"expect.",[268,1845,1846],{"class":278},"extend",[268,1848,1849],{"class":282},"(toHaveNoViolations)\n",[268,1851,1852],{"class":270,"line":376},[268,1853,461],{"emptyLinePlaceholder":460},[268,1855,1856,1859,1861,1864,1866,1869,1872,1875],{"class":270,"line":400},[268,1857,1858],{"class":278},"test",[268,1860,283],{"class":282},[268,1862,1863],{"class":306},"'button has sufficient contrast'",[268,1865,477],{"class":282},[268,1867,1868],{"class":274},"async",[268,1870,1871],{"class":282}," () ",[268,1873,1874],{"class":274},"=>",[268,1876,373],{"class":282},[268,1878,1879,1881,1883,1886,1889,1891,1894,1897,1900,1903,1905],{"class":270,"line":419},[268,1880,296],{"class":274},[268,1882,1465],{"class":282},[268,1884,1885],{"class":299},"container",[268,1887,1888],{"class":282}," } ",[268,1890,514],{"class":274},[268,1892,1893],{"class":278}," render",[268,1895,1896],{"class":282},"(\u003C",[268,1898,1899],{"class":299},"Button",[268,1901,1902],{"class":282},">Click me\u003C\u002F",[268,1904,1899],{"class":299},[268,1906,1907],{"class":282},">)\n",[268,1909,1910,1912,1915,1917,1920,1923],{"class":270,"line":439},[268,1911,296],{"class":274},[268,1913,1914],{"class":299}," results",[268,1916,303],{"class":274},[268,1918,1919],{"class":274}," await",[268,1921,1922],{"class":278}," axe",[268,1924,1925],{"class":282},"(container)\n",[268,1927,1928,1931,1934,1937],{"class":270,"line":451},[268,1929,1930],{"class":278},"  expect",[268,1932,1933],{"class":282},"(results).",[268,1935,1936],{"class":278},"toHaveNoViolations",[268,1938,1939],{"class":282},"()\n",[268,1941,1942],{"class":270,"line":457},[268,1943,1944],{"class":282},"})\n",[10,1946,1948],{"id":1947},"quick-reference-safe-color-combinations","Quick Reference: Safe Color Combinations",[15,1950,1951],{},"Here are pre-calculated, WCAG-compliant color pairs:",[19,1953,1955],{"id":1954},"on-white-background-ffffff","On White Background (#FFFFFF)",[96,1957,1958,1971],{},[99,1959,1960],{},[102,1961,1962,1965,1968],{},[105,1963,1964],{},"Text Color",[105,1966,1967],{},"Contrast Ratio",[105,1969,1970],{},"WCAG Level",[115,1972,1973,1984,1994,2005,2016,2026,2036,2046,2056,2066],{},[102,1974,1975,1978,1981],{},[120,1976,1977],{},"#1f2937 (gray-800)",[120,1979,1980],{},"12.6:1",[120,1982,1983],{},"AAA",[102,1985,1986,1989,1992],{},[120,1987,1988],{},"#374151 (gray-700)",[120,1990,1991],{},"8.6:1",[120,1993,1983],{},[102,1995,1996,1999,2002],{},[120,1997,1998],{},"#4b5563 (gray-600)",[120,2000,2001],{},"5.9:1",[120,2003,2004],{},"AA",[102,2006,2007,2010,2013],{},[120,2008,2009],{},"#6b7280 (gray-500)",[120,2011,2012],{},"3.5:1",[120,2014,2015],{},"Large text only",[102,2017,2018,2021,2024],{},[120,2019,2020],{},"#dc2626 (red-600)",[120,2022,2023],{},"5.4:1",[120,2025,2004],{},[102,2027,2028,2031,2034],{},[120,2029,2030],{},"#ea580c (orange-600)",[120,2032,2033],{},"4.6:1",[120,2035,2004],{},[102,2037,2038,2041,2044],{},[120,2039,2040],{},"#ca8a04 (yellow-600)",[120,2042,2043],{},"6.1:1",[120,2045,2004],{},[102,2047,2048,2051,2054],{},[120,2049,2050],{},"#16a34a (green-600)",[120,2052,2053],{},"5.1:1",[120,2055,2004],{},[102,2057,2058,2061,2064],{},[120,2059,2060],{},"#2563eb (blue-600)",[120,2062,2063],{},"5.7:1",[120,2065,2004],{},[102,2067,2068,2071,2073],{},[120,2069,2070],{},"#7c3aed (violet-600)",[120,2072,2001],{},[120,2074,2004],{},[19,2076,2078],{"id":2077},"on-dark-background-111827","On Dark Background (#111827)",[96,2080,2081,2091],{},[99,2082,2083],{},[102,2084,2085,2087,2089],{},[105,2086,1964],{},[105,2088,1967],{},[105,2090,1970],{},[115,2092,2093,2102,2112,2122,2131,2141,2151,2160,2170,2180],{},[102,2094,2095,2098,2100],{},[120,2096,2097],{},"#f9fafb (gray-50)",[120,2099,1980],{},[120,2101,1983],{},[102,2103,2104,2107,2110],{},[120,2105,2106],{},"#f3f4f6 (gray-100)",[120,2108,2109],{},"10.9:1",[120,2111,1983],{},[102,2113,2114,2117,2120],{},[120,2115,2116],{},"#e5e7eb (gray-200)",[120,2118,2119],{},"8.4:1",[120,2121,1983],{},[102,2123,2124,2127,2129],{},[120,2125,2126],{},"#d1d5db (gray-300)",[120,2128,2063],{},[120,2130,2004],{},[102,2132,2133,2136,2139],{},[120,2134,2135],{},"#9ca3af (gray-400)",[120,2137,2138],{},"3.1:1",[120,2140,2015],{},[102,2142,2143,2146,2149],{},[120,2144,2145],{},"#fca5a5 (red-300)",[120,2147,2148],{},"5.6:1",[120,2150,2004],{},[102,2152,2153,2156,2158],{},[120,2154,2155],{},"#fdba74 (orange-300)",[120,2157,2053],{},[120,2159,2004],{},[102,2161,2162,2165,2168],{},[120,2163,2164],{},"#fde047 (yellow-300)",[120,2166,2167],{},"9.7:1",[120,2169,1983],{},[102,2171,2172,2175,2178],{},[120,2173,2174],{},"#86efac (green-300)",[120,2176,2177],{},"5.8:1",[120,2179,2004],{},[102,2181,2182,2185,2187],{},[120,2183,2184],{},"#93c5fd (blue-300)",[120,2186,2023],{},[120,2188,2004],{},[10,2190,2192],{"id":2191},"related-tools","Related Tools",[30,2194,2195,2202],{},[33,2196,2197,2201],{},[201,2198,2200],{"href":2199},"\u002Ftools\u002Fcolor-converter","Color Converter"," - Convert colors to find accessible alternatives",[33,2203,2204,2208],{},[201,2205,2207],{"href":2206},"\u002Fguides\u002Ftailwind-color-palette","Tailwind Color Palette"," - Build accessible color systems with Tailwind",[2210,2211,2212],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":91,"searchDepth":293,"depth":293,"links":2214},[2215,2219,2224,2230,2235,2239,2243],{"id":12,"depth":293,"text":13,"children":2216},[2217,2218],{"id":21,"depth":362,"text":22},{"id":72,"depth":362,"text":73},{"id":183,"depth":293,"text":184,"children":2220},[2221,2222,2223],{"id":187,"depth":362,"text":188},{"id":229,"depth":362,"text":230},{"id":255,"depth":362,"text":256},{"id":818,"depth":293,"text":819,"children":2225},[2226,2227,2228,2229],{"id":822,"depth":362,"text":823},{"id":926,"depth":362,"text":927},{"id":1055,"depth":362,"text":1056},{"id":1278,"depth":362,"text":1279},{"id":1439,"depth":293,"text":1440,"children":2231},[2232,2233,2234],{"id":1446,"depth":362,"text":1447},{"id":1523,"depth":362,"text":1524},{"id":1644,"depth":362,"text":1645},{"id":1722,"depth":293,"text":1723,"children":2236},[2237,2238],{"id":1726,"depth":362,"text":1727},{"id":1784,"depth":362,"text":1785},{"id":1947,"depth":293,"text":1948,"children":2240},[2241,2242],{"id":1954,"depth":362,"text":1955},{"id":2077,"depth":362,"text":2078},{"id":2191,"depth":293,"text":2192},"2026-05-26","Master WCAG 2.1 AA and AAA contrast standards with practical examples. Learn calculation methods, fix common failures, and ensure accessibility in both light and dark modes.","md",{"immutable":460},"\u002Fguides\u002Fwcag-contrast-practical",{"title":5,"description":2245},"guides\u002Fwcag-contrast-practical","JsjxaP5GlrHDf03rL_OGhAQtxXuMF7VcPn2IGhhgMAM",1780401325844]