CSS darkgray Lighter Than gray: Choosing Neutrals by Value, Not Name

If you are asking why css darkgray lighter than gray in a stylesheet, the answer is in the numbers. In CSS, darkgray is #A9A9A9 (RGB 169, 169, 169) and gray is #808080 (RGB 128, 128, 128), so the keyword with “dark” in its name is the lighter of the two.

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 CSS Named Color Reference. 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.

Why is CSS darkgray lighter than gray?

CSS defines darkgray as #A9A9A9 and gray as #808080. 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.

The CSS Color Module Level 4 draft dated November 3, 2026 explicitly identifies this inconsistency, and MDN’s named-color reference 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.

Why css darkgray lighter than gray is a naming quirk, not a scale

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.

Here are four common grays in their actual dark-to-light order:

1. dimgray #696969
2. gray #808080
3. darkgray #A9A9A9
4. lightgray #D3D3D3

The grey spellings (such as darkgrey and dimgrey) are aliases. They point to the same values as the gray spellings and are not extra shades.

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.

Which neutral should you pick? Decide by role

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.

• Control border: if the border is what identifies an input, it must stand apart from the color outside the control.
• Decorative divider: it carries no required information, so it can be quieter, but it still deserves a visual review.
• Muted text: this is a text role with its own, higher threshold.
• Disabled state: inactive controls are generally exempt from contrast requirements, though you should still keep them recognizable.

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 brand color design tokens in CSS variables covers that naming approach in more depth, and the CSS Variable Theme Generator includes a Border role among its color roles so you can preview it on components.

:root {
  --color-border-control: #808080; /* chosen after a contrast check */
  --color-surface-page: #FFFFFF;
}

Worked example: a white input on a white page

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’s Understanding document uses exactly this layout, an input with a white interior, a gray border and a white exterior.

So in this layout, the “lighter” darkgray fails where gray passes. These are calculated values from the WCAG relative-luminance formula, not measurements of an actual form.

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 two-color focus indicator in CSS article shows how to handle them.

How do you verify a neutral with 66Colorful, step by step?

1. Open the CSS Named Color Reference and search for darkgray and gray. The search accepts keywords or HEX values, so you can read each value directly.
2. 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.
3. Open the Contrast Checker. Enter the border color and the actual adjacent surface color. It accepts CSS color names and HEX values.
4. 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.
5. Repeat the check for light and dark surfaces and for relevant states such as hover, error and disabled.
6. Save the chosen value under a role name so the reason survives later edits.

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.

What does a passing 3:1 border result not prove?

• It is not a text pass. Normal-sized text has a separate 4.5:1 minimum under SC 1.4.3 Contrast (Minimum) 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.
• One pair is not a compliant interface. Each adjacent combination, in each state, needs its own review.
• Thin lines look weaker. Thin strokes and antialiasing can reduce the effective visible contrast, so a nominal ratio is not the whole visual review.
• Assumptions apply. The ratios assume opaque sRGB colors. Transparency, shadows, gradients, browser rendering and device conditions can change what people see.
• Color should not work alone. Pair error or status borders with text, icons or shapes.
• Screens are not print. If the same neutral goes to packaging, read why a screen gray can shift in print.

Frequently asked questions

Is darkgray the same as darkgrey in CSS?

Yes. The grey spelling is an alias that resolves to the same value, #A9A9A9. The same applies to gray and grey, dimgray and dimgrey, and the other paired spellings. They are alternate spellings, not additional shades.

Is there a known reason darkgray is lighter than gray?

I have not verified a history for this particular pair, so I will not offer one. What is documented is that the W3C’s CSS Color Module Level 4 draft identifies the inconsistency and MDN notes that names lack a strict rationale. Use the values instead.

Which of the common CSS grays is darkest?

Among dimgray, gray, darkgray and lightgray, dimgray is darkest at #696969, followed by gray, darkgray and lightgray at #D3D3D3. Other keywords such as darkslategray are also dark but carry a slight blue-green tint.

Is gray good enough for text on white?

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.

Does every input border need 3:1 contrast?

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.

Should I write named colors or HEX values in CSS?

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.

Does the swatch text contrast in the reference tool check my border?

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.

Next steps

Remember that css darkgray lighter than gray is simply how CSS defines those keywords: #A9A9A9 sits above #808080 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.

Related tools & resources on 66Colorful:

• Css Named Color Reference
• Contrast Checker
• Two Color Focus Indicator Css
• Brand Color Design Tokens Css Variables

Sources and further reading

• CSS type – CSS | MDN
• CSS Color Module Level 4
• Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C
• Css Named Color Reference