{"id":707,"date":"2026-11-11T13:00:03","date_gmt":"2026-11-11T13:00:03","guid":{"rendered":"https:\/\/66colorful.com\/blog\/?p=707"},"modified":"2026-11-11T13:00:03","modified_gmt":"2026-11-11T13:00:03","slug":"css-darkgray-lighter-than-gray","status":"publish","type":"post","link":"https:\/\/66colorful.com\/blog\/css-darkgray-lighter-than-gray\/","title":{"rendered":"CSS darkgray Lighter Than gray: Choosing Neutrals by Value, Not Name"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you are asking why css darkgray lighter than gray in a stylesheet, the answer is in the numbers. In CSS, <code>darkgray<\/code> is <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/a9a9a9\" title=\"View the #A9A9A9 color page\" style=\"--cf-chip-color:#a9a9a9;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#A9A9A9<\/span><\/a> (RGB 169, 169, 169) and <code>gray<\/code> is <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/808080\" title=\"View the #808080 color page\" style=\"--cf-chip-color:#808080;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#808080<\/span><\/a> (RGB 128, 128, 128), so the keyword with &#8220;dark&#8221; in its name is the lighter of the two.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That matters when you pick a border, divider or muted surface by name and assume the adjective tells you the order. You can follow along in the <a href=\"https:\/\/66colorful.com\/tools\/css-named-color-reference\" title=\"Css Named Color Reference\">CSS Named Color Reference<\/a>. I will show the real order of the common grays, walk through a form-border example, and list the checks that settle the choice. The contrast figures below are calculated examples, not measurements of a rendered page.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li class=\"\"><a href=\"#why-is-css-darkgray-lighter-than-gray-1\">Why is CSS darkgray lighter than gray?<\/a><\/li><li class=\"\"><a href=\"#why-css-darkgray-lighter-than-gray-is-a-naming-quirk-not-a-scale-2\">Why css darkgray lighter than gray is a naming quirk, not a scale<\/a><\/li><li class=\"\"><a href=\"#which-neutral-should-you-pick-decide-by-role-3\">Which neutral should you pick? Decide by role<\/a><\/li><li class=\"\"><a href=\"#worked-example-a-white-input-on-a-white-page-4\">Worked example: a white input on a white page<\/a><\/li><li class=\"\"><a href=\"#how-do-you-verify-a-neutral-with-66colorful-step-by-step-5\">How do you verify a neutral with 66Colorful, step by step?<\/a><\/li><li class=\"\"><a href=\"#what-does-a-passing-31-border-result-not-prove-6\">What does a passing 3:1 border result not prove?<\/a><\/li><li class=\"\"><a href=\"#frequently-asked-questions\">Frequently asked questions<\/a><\/li><li class=\"\"><a href=\"#next-steps\">Next steps<\/a><\/li><li class=\"\"><a href=\"#sources\">Sources and further reading<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<div class=\"wp-block-image post_content_image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-1-664-1-07963be25b6b1f64-1024x576.jpg\" alt=\"Two neutral gray swatch cards of different lightness on a white desk\" class=\"wp-image-710\" srcset=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-1-664-1-07963be25b6b1f64-1024x576.jpg 1024w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-1-664-1-07963be25b6b1f64-300x169.jpg 300w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-1-664-1-07963be25b6b1f64-768x432.jpg 768w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-1-664-1-07963be25b6b1f64-800x450.jpg 800w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-1-664-1-07963be25b6b1f64.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"why-is-css-darkgray-lighter-than-gray-1\">Why is CSS darkgray lighter than gray?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS defines <code>darkgray<\/code> as <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/a9a9a9\" title=\"View the #A9A9A9 color page\" style=\"--cf-chip-color:#a9a9a9;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#A9A9A9<\/span><\/a> and <code>gray<\/code> as <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/808080\" title=\"View the #808080 color page\" style=\"--cf-chip-color:#808080;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#808080<\/span><\/a>. Every RGB channel in darkgray is 169, against 128 in gray, so darkgray is lighter. Both are pure neutrals with equal red, green and blue values, which means they differ in lightness only, not in hue.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Keyword<\/th><th>Value<\/th><th>RGB<\/th><th>Relative position<\/th><\/tr><\/thead><tbody><tr><td><code>gray<\/code><\/td><td><a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/808080\" title=\"View the #808080 color page\" style=\"--cf-chip-color:#808080;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#808080<\/span><\/a><\/td><td>128, 128, 128<\/td><td>Darker of the pair<\/td><\/tr><tr><td><code>darkgray<\/code><\/td><td><a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/a9a9a9\" title=\"View the #A9A9A9 color page\" style=\"--cf-chip-color:#a9a9a9;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#A9A9A9<\/span><\/a><\/td><td>169, 169, 169<\/td><td>Lighter of the pair<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/www.w3.org\/TR\/2026\/CRD-css-color-4-20261103\/\" title=\"CSS Color Module Level 4\" target=\"_blank\" rel=\"noopener\">CSS Color Module Level 4 draft<\/a> dated November 3, 2026 explicitly identifies this inconsistency, and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Values\/named-color\" title=\"CSS type - CSS | MDN\" target=\"_blank\" rel=\"noopener\">MDN&#8217;s named-color reference<\/a> notes that color names do not follow a strict naming rationale. I will not guess at a history for this one pair. The practical lesson is enough: treat each keyword as a fixed label for a fixed value.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large post_content_image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-2-664-2-d28b7f319c3b6828-1024x1024.jpg\" alt=\"Row of four gray tiles arranged from dark to light\" class=\"wp-image-712\" srcset=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-2-664-2-d28b7f319c3b6828-1024x1024.jpg 1024w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-2-664-2-d28b7f319c3b6828-300x300.jpg 300w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-2-664-2-d28b7f319c3b6828-150x150.jpg 150w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-2-664-2-d28b7f319c3b6828-768x768.jpg 768w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-2-664-2-d28b7f319c3b6828.jpg 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-css-darkgray-lighter-than-gray-is-a-naming-quirk-not-a-scale-2\">Why css darkgray lighter than gray is a naming quirk, not a scale<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A color name is an identifier, like a label on a jar. The words dark and light are part of that label, so they do not tell you where a keyword sits relative to its neighbors. If you want a dependable order, read the values, not the adjectives.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are four common grays in their actual dark-to-light order:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>dimgray<\/code> <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/696969\" title=\"View the #696969 color page\" style=\"--cf-chip-color:#696969;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#696969<\/span><\/a><\/li>\n\n\n\n<li><code>gray<\/code> <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/808080\" title=\"View the #808080 color page\" style=\"--cf-chip-color:#808080;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#808080<\/span><\/a><\/li>\n\n\n\n<li><code>darkgray<\/code> <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/a9a9a9\" title=\"View the #A9A9A9 color page\" style=\"--cf-chip-color:#a9a9a9;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#A9A9A9<\/span><\/a><\/li>\n\n\n\n<li><code>lightgray<\/code> <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/d3d3d3\" title=\"View the #D3D3D3 color page\" style=\"--cf-chip-color:#d3d3d3;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#D3D3D3<\/span><\/a><\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>grey<\/code> spellings (such as <code>darkgrey<\/code> and <code>dimgrey<\/code>) are aliases. They point to the same values as the <code>gray<\/code> spellings and are not extra shades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For pure grays, a higher RGB number always means a lighter color, so sorting is easy. Once you add a tint, be careful: HSL lightness and HSV value are not the same as relative luminance, which is what WCAG contrast uses. Comparing the hex values of tinted neutrals by eye or by HSL lightness can mislead you.<\/p>\n\n\n<div class=\"wp-block-image post_content_image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-3-664-3-36e2c57f509f23d8-1024x768.jpg\" alt=\"Desk with blank interface cards and neutral gray swatch chips\" class=\"wp-image-714\" srcset=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-3-664-3-36e2c57f509f23d8-1024x768.jpg 1024w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-3-664-3-36e2c57f509f23d8-300x225.jpg 300w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-3-664-3-36e2c57f509f23d8-768x576.jpg 768w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/11\/css-darkgray-lighter-than-gray-image-3-664-3-36e2c57f509f23d8.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"which-neutral-should-you-pick-decide-by-role-3\">Which neutral should you pick? Decide by role<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a neutral for the job it has to do and the contrast it needs against the color beside it. A role is a job such as control border, divider or muted text.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Control border:<\/strong> if the border is what identifies an input, it must stand apart from the color outside the control.<\/li>\n\n\n\n<li><strong>Decorative divider:<\/strong> it carries no required information, so it can be quieter, but it still deserves a visual review.<\/li>\n\n\n\n<li><strong>Muted text:<\/strong> this is a text role with its own, higher threshold.<\/li>\n\n\n\n<li><strong>Disabled state:<\/strong> inactive controls are generally exempt from contrast requirements, though you should still keep them recognizable.<\/li>\n\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Once you decide, record the value under a role name instead of a color name. The value is the decision and the variable name records why. The article on <a href=\"https:\/\/66colorful.com\/blog\/brand-color-design-tokens-css-variables\/\" title=\"Brand Color Design Tokens Css Variables\">brand color design tokens in CSS variables<\/a> covers that naming approach in more depth, and the <a href=\"https:\/\/66colorful.com\/tools\/css-variable-theme-generator\" title=\"CSS Variable Theme Generator\">CSS Variable Theme Generator<\/a> includes a Border role among its color roles so you can preview it on components.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">:root {\n  --color-border-control: #808080; \/* chosen after a contrast check *\/\n  --color-surface-page: #FFFFFF;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"worked-example-a-white-input-on-a-white-page-4\">Worked example: a white input on a white page<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Take a white input sitting on a white page. If the border is the visual cue that identifies the input, compare the border with the white that touches it on the outside. WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast (Level AA) asks for 3:1 against adjacent colors for visual information needed to identify a UI component or state. W3C&#8217;s Understanding document uses exactly this layout, an input with a white interior, a gray border and a white exterior.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Border<\/th><th>Adjacent color<\/th><th>Approx. ratio<\/th><th>3:1 threshold<\/th><\/tr><\/thead><tbody><tr><td><code>gray<\/code> <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/808080\" title=\"View the #808080 color page\" style=\"--cf-chip-color:#808080;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#808080<\/span><\/a><\/td><td>White <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/ffffff\" title=\"View the #FFFFFF color page\" style=\"--cf-chip-color:#ffffff;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#FFFFFF<\/span><\/a><\/td><td>About 3.95:1<\/td><td>Met<\/td><\/tr><tr><td><code>darkgray<\/code> <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/a9a9a9\" title=\"View the #A9A9A9 color page\" style=\"--cf-chip-color:#a9a9a9;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#A9A9A9<\/span><\/a><\/td><td>White <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/ffffff\" title=\"View the #FFFFFF color page\" style=\"--cf-chip-color:#ffffff;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#FFFFFF<\/span><\/a><\/td><td>About 2.35:1<\/td><td>Not met<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">So in this layout, the &#8220;lighter&#8221; darkgray fails where gray passes. These are calculated values from the WCAG relative-luminance formula, not measurements of an actual form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Two qualifications keep this honest. First, the criterion does not require every decorative border to reach 3:1. If something else already identifies the input, such as a filled background, check the colors touching that cue instead. W3C also describes exceptions, including inactive controls and unmodified user-agent appearance. Second, if the surrounding surface changes, recalculate against the new color. Focus states are a separate requirement, and the <a href=\"https:\/\/66colorful.com\/blog\/two-color-focus-indicator-css\/\" title=\"Two Color Focus Indicator Css\">two-color focus indicator in CSS<\/a> article shows how to handle them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-you-verify-a-neutral-with-66colorful-step-by-step-5\">How do you verify a neutral with 66Colorful, step by step?<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <a href=\"https:\/\/66colorful.com\/tools\/css-named-color-reference\" title=\"Css Named Color Reference\">CSS Named Color Reference<\/a> and search for <code>darkgray<\/code> and <code>gray<\/code>. The search accepts keywords or HEX values, so you can read each value directly.<\/li>\n\n\n\n<li>Sort keywords by lightness (light to dark) to see the neutrals in real order. Turn on the grey spellings only if you want the aliases listed.<\/li>\n\n\n\n<li>Open the <a href=\"https:\/\/66colorful.com\/tools\/contrast-checker\" title=\"Contrast Checker\">Contrast Checker<\/a>. Enter the border color and the actual adjacent surface color. It accepts CSS color names and HEX values.<\/li>\n\n\n\n<li>For a border that must identify a control, read the UI 3:1 result. Do not use the text result for the border, and separately check any input text against its own background.<\/li>\n\n\n\n<li>Repeat the check for light and dark surfaces and for relevant states such as hover, error and disabled.<\/li>\n\n\n\n<li>Save the chosen value under a role name so the reason survives later edits.<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">One trap: the reference tool can show WCAG text contrast on its swatches. That figure describes text on the swatch, so it does not tell you whether a thin border passes the non-text rule.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-does-a-passing-31-border-result-not-prove-6\">What does a passing 3:1 border result not prove?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>It is not a text pass.<\/strong> Normal-sized text has a separate 4.5:1 minimum under <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum\" title=\"Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C\" target=\"_blank\" rel=\"noopener\">SC 1.4.3 Contrast (Minimum)<\/a> at Level AA. Gray at about 3.95:1 on white clears the 3:1 border threshold, but it does not meet 4.5:1 for normal-size text.<\/li>\n\n\n\n<li><strong>One pair is not a compliant interface.<\/strong> Each adjacent combination, in each state, needs its own review.<\/li>\n\n\n\n<li><strong>Thin lines look weaker.<\/strong> Thin strokes and antialiasing can reduce the effective visible contrast, so a nominal ratio is not the whole visual review.<\/li>\n\n\n\n<li><strong>Assumptions apply.<\/strong> The ratios assume opaque sRGB colors. Transparency, shadows, gradients, browser rendering and device conditions can change what people see.<\/li>\n\n\n\n<li><strong>Color should not work alone.<\/strong> Pair error or status borders with text, icons or shapes.<\/li>\n\n\n\n<li><strong>Screens are not print.<\/strong> If the same neutral goes to packaging, read why a <a href=\"https:\/\/66colorful.com\/blog\/neutral-gray-cmyk-packaging-color-cast\/\" title=\"Neutral Gray Cmyk Packaging Color Cast\">screen gray can shift in print<\/a>.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frequently-asked-questions\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-1\">Is darkgray the same as darkgrey in CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. The grey spelling is an alias that resolves to the same value, <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/a9a9a9\" title=\"View the #A9A9A9 color page\" style=\"--cf-chip-color:#a9a9a9;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#A9A9A9<\/span><\/a>. The same applies to gray and grey, dimgray and dimgrey, and the other paired spellings. They are alternate spellings, not additional shades.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-2\">Is there a known reason darkgray is lighter than gray?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I have not verified a history for this particular pair, so I will not offer one. What is documented is that the W3C&#8217;s CSS Color Module Level 4 draft identifies the inconsistency and MDN notes that names lack a strict rationale. Use the values instead.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-3\">Which of the common CSS grays is darkest?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Among dimgray, gray, darkgray and lightgray, dimgray is darkest at <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/696969\" title=\"View the #696969 color page\" style=\"--cf-chip-color:#696969;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#696969<\/span><\/a>, followed by gray, darkgray and lightgray at <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/d3d3d3\" title=\"View the #D3D3D3 color page\" style=\"--cf-chip-color:#d3d3d3;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#D3D3D3<\/span><\/a>. Other keywords such as darkslategray are also dark but carry a slight blue-green tint.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-4\">Is gray good enough for text on white?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Not for normal-sized text. Gray on white is about 3.95:1 in the calculation above, while WCAG 2.2 SC 1.4.3 asks for 4.5:1 at Level AA for normal text. Large text has a 3:1 minimum, so size and weight matter. Check the real font size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-5\">Does every input border need 3:1 contrast?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. SC 1.4.11 applies to visual information required to identify a component or state. If another cue already identifies the input, the border may be decorative. Inactive controls and unmodified user-agent appearance are also covered by exceptions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-6\">Should I write named colors or HEX values in CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Both are valid CSS. Names are readable but can mislead about order, as this pair shows. For design work, I prefer a role-based custom property such as a control-border variable so the intent is clear and the value can change in one place.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-7\">Does the swatch text contrast in the reference tool check my border?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. That display describes text on a swatch. For a border that identifies a control, enter the border and the adjacent surface in the Contrast Checker and read its UI 3:1 result. Check input text separately against its own background.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"next-steps\">Next steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Remember that css darkgray lighter than gray is simply how CSS defines those keywords: <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/a9a9a9\" title=\"View the #A9A9A9 color page\" style=\"--cf-chip-color:#a9a9a9;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#A9A9A9<\/span><\/a> sits above <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/808080\" title=\"View the #808080 color page\" style=\"--cf-chip-color:#808080;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#808080<\/span><\/a> on the lightness scale. Read values, then judge each neutral by its role and by the color it actually touches. Before you ship, compare your border with its adjacent surface, repeat for each state, and keep the result under a role-based variable name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Related tools &amp; resources on 66Colorful:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/66colorful.com\/tools\/css-named-color-reference\">Css Named Color Reference<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/tools\/contrast-checker\">Contrast Checker<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/blog\/two-color-focus-indicator-css\/\">Two Color Focus Indicator Css<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/blog\/brand-color-design-tokens-css-variables\/\">Brand Color Design Tokens Css Variables<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sources\">Sources and further reading<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Values\/named-color\" target=\"_blank\" rel=\"noopener\">CSS type &#8211; CSS | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/TR\/2026\/CRD-css-color-4-20261103\/\" target=\"_blank\" rel=\"noopener\">CSS Color Module Level 4<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum\" target=\"_blank\" rel=\"noopener\">Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/tools\/css-named-color-reference\">Css Named Color Reference<\/a><\/li>\n\n\n<\/ul>\n\n\n","protected":false},"excerpt":{"rendered":"<p>CSS darkgray lighter than gray surprises many people. See the real values and how to choose neutrals by role and contrast instead of by name.<\/p>\n","protected":false},"author":1,"featured_media":708,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[319,302,316,318,317,100,103],"class_list":["post-707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-css-color-values","tag-css-named-colors","tag-darkgray-vs-gray","tag-form-border-contrast","tag-neutral-colors","tag-non-text-contrast","tag-wcag-2-2"],"_links":{"self":[{"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/posts\/707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":4,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"predecessor-version":[{"id":715,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/posts\/707\/revisions\/715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/media\/708"}],"wp:attachment":[{"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}