Insufficient contrast on highlighted suggestion

[techbridgedev]

The contrast between the background color and text on the highlighted result in the suggestions dropdown is insufficient and fails WCAG recommendations for accessibility.

It's poor in light mode, and unreadable in dark mode.

Please update the module stylesheet to use higher contrast colors for the highlighted result.

[weareoutman]

You can customize the style as you want, see https://github.com/easyops-cn/docusaurus-search-local?tab=readme-ov-file#custom-styles

[techbridgedev]

Thanks; I didn't see that. But, please consider shipping with default colors that meet accessibility requirements.

Simply overriding--search-local-highlight-color isn't sufficient because it also affects .hitWrapper mark, which can't be easily overridden because it's a module style.

Instead, I had to use .navbar__search mark to revert the <mark> elements, which need the default color to maintain contrast.

I wound up with, e.g.,

[data-theme='dark'] {

 /** Increase highlight contrast **/
 --search-local-highlight-color: var(--my-custom-highlight-color);

  /** Reset to use default **/
  & .navbar__search mark {
    color: var(--ifm-color-primary);
  }
}

[weareoutman]

What's your actual color setting of --ifm-color-primary? I think maybe you have just set a value to cause the contrast issue.

Edit: could you post a screenshot?

[seezee]

You are correct that I don't use the default value for --ifm-color-primary; however, I tested the site without my custom value and it still failed the contrast requirements for normal text.

Here are screenshots showing the contrast with the default values:

The white text on the blue highlight is too low contrast.

[seezee]