Redmine

Several kinds of secondary text in the UI, such as journal update info, form hints, attachment authors and the totals in issue list group rows, use --oc-gray-6 (#868e96) or --oc-gray-5 (#adb5bd). Their contrast against the white background is relatively low, which can make the text somewhat difficult to read.

The underlying cause is the gap between --oc-gray-6 and --oc-gray-7 in the Open Color gray scale, which is much larger than the gaps between other adjacent grays. --oc-gray-7 is used for headings and is too dark for secondary text, while --oc-gray-6 is slightly too light. As a result, the palette has no gray that is suitable for this kind of text.

For this reason, the attached patches introduce a new CSS variable, --color-text-muted (#6b737b), and use it for this kind of muted secondary text. The color lies between --oc-gray-6 and --oc-gray-7 and has the same hue as the Open Color grays, so it fits naturally into the existing gray scale. The text keeps its light appearance while becoming easier to read.

The table below compares the new color with the adjacent Open Color grays.

The following items are intentionally not changed to --color-text-muted:

• Links to closed issues and projects, locked users and closed versions keep --oc-gray-6, so that they remain distinguishable from regular secondary text.
• Closed or archived projects and locked users in the administration lists are changed from --oc-gray-5 to --oc-gray-6, to match the items above.
• Inactive tabs keep --oc-gray-6, because making them darker would make the selected tab harder to identify.
• The footer keeps --oc-gray-5. Before Open Color was introduced, it used #aaa, which suggests that it was intentionally designed not to draw attention, and --oc-gray-5 has a similar lightness.

In addition, links in journal details and revision info are changed from --oc-blue-6 to --oc-blue-8. These links appear within --color-text-muted text, and --oc-blue-8 has a similar lightness (0.543, compared with 0.551), so the links match the tone of the surrounding text while remaining less prominent than regular links.

The patches are as follows:

• 0001: Add --color-text-muted and use it for secondary text instead of --oc-gray-6.
• 0002: Use --color-text-muted for issue group totals and days of other months in calendars (previously --oc-gray-5).
• 0003: Use --oc-gray-6 for closed or archived projects and locked users in lists (previously --oc-gray-5).
• 0004: Change links in journal details and revision info from --oc-blue-6 to --oc-blue-8.

The screenshots below show the journal of an issue and Administration > Settings before and after applying the patches. In the journal, the update info, the details and the links in the details become darker. In Administration > Settings, the hints below the fields become darker.

Journal (before):

Journals(after):

Administration > Settings (before):

Administration > Settings (after):