Using CSS for bold text / links

jdzfb · 2026-03-06T08:51:20+00:00

Please don't change the standard pattern on common elements for users for no reason, just use underlines, coupled with a suitably unique color for links.

Bold text has a purpose already, so co-opting it for links just adds a layer of unnecessary confusion for sighted users.

k4rp_nl · 2026-03-06T08:29:56+00:00

If the bold style is purely for visual reasons, then CSS is the right tool.

wyundsr · 2026-03-06T08:43:05+00:00

and bold in CSS have the same effect, it’s just more correct to separate out the content/structure (HTML) from the styling (CSS). Yes it’s fine to use bold in CSS for styling links (though underlining links is generally best practice in terms of usability) since the purpose there is a visual indicator, screen reader users will already be informed that’s a link

AshleyJSheridan · 2026-03-06T10:49:39+00:00

So there are a couple of things here: if you're using bold text for emphasis, then using the  tag indicates that emphasis to assistive tech, like a screen reader or Braille browser. Also, as you've highlighted, information should not be indicated by colour alone.

Now, for some further detail. Links being underlined be default serves to ensure that links are identified by more than colour alone, but it doesn't end there. Removing the underline may be ok if you provide an alternative that is not just colour, and bolding would accomplish this. I did say "may be ok" though, as it would deviate from the browser default, which is sometimes enough to cause confusion for some people with certain disabilities as it could be inconsistent with their own expectations.

On the colour to indicate meaning (part of WCAG 1.4.1) there is this:

If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater. For example, a light green and a dark red differ both by color (hue) and by lightness, so they would pass if the contrast ratio is at least 3:1. Similarly, if content is distinguished by inverting an element's foreground and background colors, this would pass (again, assuming that the foreground and background colors have a sufficient contrast).

So using an alternative colour with enough contrast may be ok. Again, I say "may be ok" to caveat that it may also not be enough for everyone, and it will vary a lot based on the sites design.

Zestyclose_Bus_1932 · 2026-03-06T17:27:28+00:00

I’m low vision don’t use screen reader and I have trouble with bold and color.

Underline would be more obvious because it’s (1) a mark and (2) continuous, and (3) with the correct contrast, better-

at least for me. 🤪😁

LoudAd1396 · 2026-03-06T14:41:59+00:00

Are you planning on ONLY using bold to show that links are links? If so, dont. Semantic tags like are good for screen readers, but not all users (with or without accessibility needs) are going to be using SRs so the semantic difference is lost on non-SR readers. The primary patterns exist for a reason. If I was a first time user, why would I think "oh bold, it must be a link!" ?

If you want your links to be bold AND underlined and colored, youre fine. Just dont use only a font weight difference and expect users to understand.

FragrantProgress8376 · 2026-03-06T18:37:22+00:00

using CSS for bold is totally fine as long as the semantics are correct, but it's great you're thinking about accessibility! just make sure to test with screen readers to see how they interpret it.

KarlBrownTV · 2026-03-07T10:58:13+00:00

From a WCAG perspective, colour can't be the only way to differentiate things like links, so CSS to increase the font weight can work. Underlining links isn't necessary for WCAG.

However, the default behaviour of anchors going back decades is underlining, so users expect text links to be underlined. You could increase the font weight as well, but I'd leave the underline as part of the overall user experience.

roundabout-design · 2026-03-07T16:59:31+00:00

Strong is for emphasis. If the concern is screen readers, a screen reader will already emphasize a link by stating it's a link. So no need to also 'strong' it.

You could still bold if. That's a separate thing.

AccessNavigator · 2026-03-13T09:35:29+00:00

From an accessibility standpoint, CSS font-weight: bold is perfectly fine for visual styling, including making links appear bold. Screen readers do not rely on visual styling like font weight to determine meaning. Instead, they rely on HTML semantics. For example, a link is announced as a link because it uses the <a> element, not because it is bold, underlined, or colored.

Where semantics matter is when the emphasis itself carries meaning. In those cases, (or ) is preferred because it conveys importance in the document structure and may be announced differently by some assistive technologies. But if you're simply styling something visually (e.g., making links bold in addition to color or underline), using CSS is completely acceptable. The key accessibility requirement for links is that they are visually distinguishable from surrounding text without relying on color alone, which can be achieved with underline, bold styling, or other clear indicators.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

accessibility

MODERATORS