Rise note block not meeting accessibility contrast with a URL added

Sep 07, 2022

Hi all,

I have a theme that uses a blue colour #0085ac

The note blocks render out as a slightly lighter blue. When I add  hyperlink to the text inside the note block it also becomes blue. The contrast drops significantly and there is no way to set the note block to a different colour!

Relevant CSS:

.brand--background-transparent {
  background-color: #0085ac1A !important;
  background-color: var(--background-color-accent-transparent) !important;
}

The contrast with blue + light blue background is 3.7. Certainly not meeting WCAG 2.0 aa standards.

 

Some suggestions:

  • If themes include a colour palette, have an options to set the note block as other theme colours (doesnt guarentee it will be contrasted enough, but if the dev team uses SCSS there may be a mixin to darken/lighten colours?)
  • additional colour picker for note block backgrounds
1 Reply