[{"data":1,"prerenderedAt":358},["ShallowReactive",2],{"blog-wcag-contrast-ratio-requirements":3},{"id":4,"title":5,"body":6,"category":345,"date":346,"description":347,"extension":348,"meta":349,"navigation":350,"path":351,"readingTime":352,"seo":353,"stem":354,"tool":355,"updated":356,"__hash__":357},"blog\u002Fblog\u002Fwcag-contrast-ratio-requirements.md","WCAG Contrast Ratio Requirements",{"type":7,"value":8,"toc":317},"minimark",[9,13,16,21,24,27,38,41,45,50,100,104,135,142,146,149,165,176,180,184,190,196,200,206,210,213,217,220,224,228,231,235,255,259,262,266,270,280,284,287,291,294,298,305,309],[10,11,12],"p",{},"Color contrast is the single most common accessibility failure on the web. The WebAIM Million study consistently finds that over 80% of homepages have at least one WCAG contrast failure. Low contrast text is unreadable for people with low vision, color blindness, or anyone using a screen in bright sunlight.",[10,14,15],{},"WCAG (Web Content Accessibility Guidelines) defines specific contrast ratios that text and UI elements must meet. This guide explains what those ratios are, how to measure them, and how to fix failures.",[17,18,20],"h2",{"id":19},"what-is-contrast-ratio","What is Contrast Ratio?",[10,22,23],{},"Contrast ratio is the relative luminance difference between two colors. It ranges from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white).",[10,25,26],{},"The formula uses relative luminance (a perceptual measure, not raw brightness):",[28,29,34],"pre",{"className":30,"code":32,"language":33},[31],"language-text","contrast ratio = (L1 + 0.05) \u002F (L2 + 0.05)\n","text",[35,36,32],"code",{"__ignoreMap":37},"",[10,39,40],{},"Where L1 is the lighter color's relative luminance and L2 is the darker color's.",[17,42,44],{"id":43},"wcag-21-requirements","WCAG 2.1 Requirements",[46,47,49],"h3",{"id":48},"level-aa-minimum","Level AA (Minimum)",[51,52,53,66],"table",{},[54,55,56],"thead",{},[57,58,59,63],"tr",{},[60,61,62],"th",{},"Element",[60,64,65],{},"Minimum ratio",[67,68,69,81,91],"tbody",{},[57,70,71,75],{},[72,73,74],"td",{},"Normal text (\u003C 18px or \u003C 14px bold)",[72,76,77],{},[78,79,80],"strong",{},"4.5:1",[57,82,83,86],{},[72,84,85],{},"Large text (≥ 18px or ≥ 14px bold)",[72,87,88],{},[78,89,90],{},"3:1",[57,92,93,96],{},[72,94,95],{},"UI components and graphical objects",[72,97,98],{},[78,99,90],{},[46,101,103],{"id":102},"level-aaa-enhanced","Level AAA (Enhanced)",[51,105,106,114],{},[54,107,108],{},[57,109,110,112],{},[60,111,62],{},[60,113,65],{},[67,115,116,126],{},[57,117,118,121],{},[72,119,120],{},"Normal text",[72,122,123],{},[78,124,125],{},"7:1",[57,127,128,131],{},[72,129,130],{},"Large text",[72,132,133],{},[78,134,80],{},[10,136,137,138,141],{},"Most organizations target ",[78,139,140],{},"Level AA"," as the minimum standard. Level AAA is recommended for text-heavy content like articles and documentation.",[17,143,145],{"id":144},"what-counts-as-large-text","What Counts as \"Large Text\"?",[10,147,148],{},"WCAG defines large text as:",[150,151,152,159],"ul",{},[153,154,155,158],"li",{},[78,156,157],{},"18px (14pt) or larger"," at regular weight",[153,160,161,164],{},[78,162,163],{},"14px (10.5pt) or larger"," at bold weight (700+)",[10,166,167,168,171,172,175],{},"CSS ",[35,169,170],{},"font-size: 18px"," meets the threshold for normal weight. For bold text, ",[35,173,174],{},"font-size: 14px; font-weight: 700"," qualifies as large.",[17,177,179],{"id":178},"common-contrast-failures","Common Contrast Failures",[46,181,183],{"id":182},"light-gray-text-on-white","Light gray text on white",[28,185,188],{"className":186,"code":187,"language":33},[31],"#999999 on #FFFFFF → 2.85:1 (FAILS AA)\n#767676 on #FFFFFF → 4.54:1 (PASSES AA) ← minimum gray on white\n#595959 on #FFFFFF → 7.0:1  (PASSES AAA)\n",[35,189,187],{"__ignoreMap":37},[10,191,192,195],{},[35,193,194],{},"#767676"," is the lightest gray that passes AA on white. This is a useful reference point.",[46,197,199],{"id":198},"white-text-on-colored-backgrounds","White text on colored backgrounds",[28,201,204],{"className":202,"code":203,"language":33},[31],"#FFFFFF on #1E90FF (dodger blue) → 3.07:1 (FAILS for normal text)\n#FFFFFF on #0066CC             → 4.84:1 (PASSES AA)\n#FFFFFF on #004D99             → 7.08:1 (PASSES AAA)\n",[35,205,203],{"__ignoreMap":37},[46,207,209],{"id":208},"placeholder-text","Placeholder text",[10,211,212],{},"Placeholder text in form inputs is notoriously low contrast. The default browser placeholder color typically fails WCAG AA.",[46,214,216],{"id":215},"disabled-state-colors","Disabled state colors",[10,218,219],{},"Disabled UI elements are exempt from contrast requirements under WCAG 2.1 (criterion 1.4.3 note: \"Text that is part of an inactive user interface component\" has no contrast requirement). However, making disabled elements distinguishable from enabled elements still improves usability.",[17,221,223],{"id":222},"how-to-test-contrast","How to Test Contrast",[46,225,227],{"id":226},"browser-devtools","Browser DevTools",[10,229,230],{},"Chrome and Firefox DevTools show contrast ratios in the color picker. Open DevTools → Inspect an element → Click the color swatch → See the contrast ratio and WCAG compliance.",[46,232,234],{"id":233},"automated-tools","Automated tools",[150,236,237,243,249],{},[153,238,239,242],{},[78,240,241],{},"axe DevTools"," (browser extension) — scans the entire page for contrast failures",[153,244,245,248],{},[78,246,247],{},"Lighthouse"," (built into Chrome) — includes contrast checks in the accessibility audit",[153,250,251,254],{},[78,252,253],{},"WAVE"," (web evaluation tool) — highlights contrast errors inline",[46,256,258],{"id":257},"manual-check","Manual check",[10,260,261],{},"For custom graphics, gradients, or text on images, you need to check the specific foreground\u002Fbackground color combination. Use a contrast calculator that computes the ratio from two color values.",[17,263,265],{"id":264},"fixing-contrast-issues","Fixing Contrast Issues",[46,267,269],{"id":268},"strategy-1-darken-the-text","Strategy 1: Darken the text",[10,271,272,273,276,277,279],{},"The simplest fix is to make text darker. Going from ",[35,274,275],{},"#999"," to ",[35,278,194],{}," on white fixes the most common failure with minimal visual change.",[46,281,283],{"id":282},"strategy-2-darken-the-background","Strategy 2: Darken the background",[10,285,286],{},"For light text on colored backgrounds, darken the background until the ratio passes. Shift the hue toward a darker shade rather than adding black, which dulls the color.",[46,288,290],{"id":289},"strategy-3-increase-font-size-or-weight","Strategy 3: Increase font size or weight",[10,292,293],{},"Large text has a lower contrast threshold (3:1 vs 4.5:1). If a color combination fails at 16px, it may pass at 18px or at 14px bold.",[46,295,297],{"id":296},"strategy-4-add-a-text-shadow-or-background-overlay","Strategy 4: Add a text shadow or background overlay",[10,299,300,301,304],{},"For text over images, add a semi-transparent overlay between the image and text, or use ",[35,302,303],{},"text-shadow"," to create a contrasting halo.",[17,306,308],{"id":307},"check-your-colors","Check Your Colors",[10,310,311,316],{},[312,313,315],"a",{"href":314},"\u002Ftools\u002Fcolor-converter","StackCache Color & Contrast"," converts between Hex, RGB, HSL, and CMYK and checks WCAG contrast ratios for any color pair — all locally in your browser.",{"title":37,"searchDepth":318,"depth":318,"links":319},2,[320,321,326,327,333,338,344],{"id":19,"depth":318,"text":20},{"id":43,"depth":318,"text":44,"children":322},[323,325],{"id":48,"depth":324,"text":49},3,{"id":102,"depth":324,"text":103},{"id":144,"depth":318,"text":145},{"id":178,"depth":318,"text":179,"children":328},[329,330,331,332],{"id":182,"depth":324,"text":183},{"id":198,"depth":324,"text":199},{"id":208,"depth":324,"text":209},{"id":215,"depth":324,"text":216},{"id":222,"depth":318,"text":223,"children":334},[335,336,337],{"id":226,"depth":324,"text":227},{"id":233,"depth":324,"text":234},{"id":257,"depth":324,"text":258},{"id":264,"depth":318,"text":265,"children":339},[340,341,342,343],{"id":268,"depth":324,"text":269},{"id":282,"depth":324,"text":283},{"id":289,"depth":324,"text":290},{"id":296,"depth":324,"text":297},{"id":307,"depth":318,"text":308},"Accessibility","2026-09-08","Understand WCAG 2.1 contrast ratios for text, UI components, and graphical objects. Learn how to test and fix contrast issues for web accessibility.","md",{},true,"\u002Fblog\u002Fwcag-contrast-ratio-requirements",6,{"title":5,"description":347},"blog\u002Fwcag-contrast-ratio-requirements","color-converter",null,"8NPrrUNk_gKDWKc0hRyfoM9ZsfcXnTZOJo04V89HWTQ",1788868139438]