WCAG 2.1, color contrast and other improvements

Hello, I have a few questions about implementing some improvements (WCAG 2.1):

  1. Color contrast ratio - the minimum value is 4.5. The whole text should be more comfortable to read. Is it possible to just darken the color palette and change the color of some bright elements like I have done in this pull request or there is a better solution? Contrast ratio by bxo11 · Pull Request #5396 · indico/indico · GitHub

  2. Is there a particular reason for using a different style for a protected label instead of using the same as the new label?

  3. How about adding a title attribute to elements without any text value with a description of what it is responsible for? Elements without titles have already a data-title attribute. What this attribute is for?

Thanks in advance

  1. Could you add some before/after screenshots to that PR to highlight the changes? But in principle making slight adjustments for higher contrast seems like a good solution.
  2. IIRC. we didn’t have the nice label elements when that text was added. However, this label in your example looks a bit too prominent. While the contrast etc there may below, this is because it’s just extra information you usually don’t care about that much. Replacing it with an icon might be a better option here.
  3. Depends on the element. As usual, concrete examples help. data-title is usually used on links/buttons that open modal dialogs and in that case the attribute goes in the modal’s title bar, but I wouldn’t be surprised if we have other places where it’s used in a different way.
  1. I added screenshots to PR
  2. Something like this?
  3. If some elements have only a data-title attribute the title should be duplicated?
    <a class="icon-edit"
       data-title="{% trans %}Edit news{% endtrans %}"
       title="{% trans %}Edit news{% endtrans %}"
       data-href="{{ url_for('.edit_news', item) }}"
    or is it better to do as below?

Adding title="...trans...text...endtrans" is the way to go. (title=data-title is not how HTML works ;))