Apostrophe 2: Heading contrast & Accessibility

[supernovia]

Steps to replicate

Activate Apostrophe 2 on a site with no Custom Colors upgrades

Result

In all available color palettes, headings are rendered in #C0C0C0 against #FFFFFF -- a contrast ratio of only 1.82:1

Expected

Availability of a higher contrast palette, or custom color availability

• User report: https://en.forums.wordpress.com/topic/change-color-of-post-title/
• Follow-up ticket: Same
• User's site: https://nyghphilo.wordpress.com/

[KokkieH]

Noting this is specifically in the single-post/page view.

Another user has requested this on the same forum thread.

[Aurorum]

Another request in the same forum thread, hoping for black instead of silver.

[laurelfulford]

This one's tough! We can't really change the theme's current appearance, since it will also affect other live sites that may not welcome it.

One option could be adding another higher contrast colour palette, but we'll need to look at how the colour annotations have been set up, and whether this header colour can be changed there, again, without affecting other live sites.

[Aurorum]

@laurelfulford Thinking about this one again, and out of curiosity, should the colour not be updated to at least #949494 intentionally to affect other sites in order to meet the 3:1 ratio? Or is that less applicable to themes and more to just Calypso?

[laurelfulford]

That's a good question, @torres126!

WordPress.com's themes follow the WordPress theme requirements for accessibility when they are tagged accessibility-ready.

That's not to say we don't take accessibility into account for themes not tagged accessibility-ready -- things like skip links, controls (using buttons instead of links where appropriate), screen reader text, etc. are pretty consistently included. I'd say contrast is probably one of the main areas where many of our themes not marked accessibility-ready fall short. The requirements for the tag is a level AA contrast ratio (4.5:1).

When possible, we do try to include a high contrast colour palette as an option under the custom colours -- though they wouldn't always meet that requirement, either, at least it would be an improvement.

All that's not to say I'd rule out intentionally changing the colours, but I'd like to explore custom colour options first. I definitely welcome second opinions on this, though :) I'll add that tag to the ticket for a little more visibility!

[Aurorum]

Another mention here: https://en.forums.wordpress.com/topic/change-heading-color-2/

My issue is that it makes the title of my blog posts as well as any headings a light grey color. I want these areas of my posts to stand out and the light color does not do that.

[laurelfulford]

This one's tough! We can't really change the theme's current appearance, since it will also affect other live sites that may not welcome it.

One option could be adding another higher contrast colour palette, but we'll need to look at how the colour annotations have been set up, and whether this header colour can be changed there, again, without affecting other live sites.

[Aurorum]

@laurelfulford Thinking about this one again, and out of curiosity, should the colour not be updated to at least #949494 intentionally to affect other sites in order to meet the 3:1 ratio? Or is that less applicable to themes and more to just Calypso?

[laurelfulford]

That's a good question, @torres126!

WordPress.com's themes follow the WordPress theme requirements for accessibility when they are tagged accessibility-ready.

That's not to say we don't take accessibility into account for themes not tagged accessibility-ready -- things like skip links, controls (using buttons instead of links where appropriate), screen reader text, etc. are pretty consistently included. I'd say contrast is probably one of the main areas where many of our themes not marked accessibility-ready fall short. The requirements for the tag is a level AA contrast ratio (4.5:1).

When possible, we do try to include a high contrast colour palette as an option under the custom colours -- though they wouldn't always meet that requirement, either, at least it would be an improvement.

All that's not to say I'd rule out intentionally changing the colours, but I'd like to explore custom colour options first. I definitely welcome second opinions on this, though :) I'll add that tag to the ticket for a little more visibility!

[Aurorum]

Another mention here: https://en.forums.wordpress.com/topic/change-heading-color-2/

My issue is that it makes the title of my blog posts as well as any headings a light grey color. I want these areas of my posts to stand out and the light color does not do that.

[github-actions]

As a part of this repository’s maintenance, this issue is being marked as stale due to inactivity. Please feel free to comment on it in case we missed something.

[cuemarie]

Ran into this again today here: 35802305-hc

Headings, Page Titles, and Contact Form all show up in light grey by default

Working on putting together CSS for the user as a workaround

-- Adding color: inherit via CSS for any headings or content that's showing up light grey resets it to a much easier to read dark grey. My user wanted black, so not needed here, but wanted to add this note; hattip to @edequalsawesome who pointed it out.

[github-actions]

As a part of this repository’s maintenance, this issue is being marked as stale due to inactivity. Please feel free to comment on it in case we missed something.