---
title: Using color responsibly
description: Be mindful about color contrast, color blindness, and vision deficiencies when customizing your posts and pages.
---

[![uConnect](https://s41911.pcdn.co/wp-content/uploads/logo.svg)](https://www.gouconnect.com/)

- [Knowledge Base](https://support.gouconnect.com/)
- [Career Everywhere](https://www.gouconnect.com/career-everywhere/)
- [Community](https://www.gouconnect.com/career-everywhere/community/access/)
- [Submit a Ticket](https://share.hsforms.com/10AUHU9-DRi-Bw3fdB-SUYA8bok)
- [Support Portal Login](https://support.gouconnect.com/_hcms/mem/login)

✕

## Submit a Ticket

Loading support form...

[Skip to content](https://support.gouconnect.com/articles/9347024-using-color-responsibly#main-content)

Open main navigation

Close main navigation

 What do you need help with today?

- There are no suggestions because the search field is empty.

1. [uConnect Knowledge Base](https://support.gouconnect.com/articles)
2. [Accessibility Hub](https://support.gouconnect.com/articles/accessibility-hub)

# Using color responsibly

How we experience color

Did you know that 8.73% of people experience some form of color vision deficiency? According to [X-Rite](https://www.xrite.com/hue-test)*,* 1 in 255 women and 1 in 12 men are affected. Red/green color blindness (deuteranomaly) is most common.

 

![Chart displaying percentages of different types of color blindness along a spectral gradient that emulates each condition. 92% have normal vision. 2.7% have deuteranomaly. 0.66% have protanomaly. 0.59% have protanopia. 0.56% have deuteranopia. 0.015% have tritanopia. 0.01% have tritanomaly. \<0.0001% have achromatopsia.](https://support.gouconnect.com/hubfs/Knowledge%20Base%20Import/image-Feb-25-2026-06-53-06-0345-PM.png)

*via Wikipedia, [“Color Blindness”](https://en.wikipedia.org/wiki/Color_blindness)*

 

**How’s your hue IQ?** Try the [X-Rite Color Challenge and Hue Test](https://www.xrite.com/hue-test) to see how your color vision compares.

 

Even beyond color blindness, other factors affect our vision and understanding of color:

- Lighting conditions (sunny day, dark mode)
- Colors in our environment
- Fatigue, eye strain, and other physical barriers
- [Cultural differences](https://www.openculture.com/2018/08/surprising-pattern-behind-names-colors-around-world.html)

 Don't rely on color as the only difference

Since it's not safe to assume that everyone experiences color the same way, we can't use color as the only differentiator between e.g. a "good" and "bad" state. If we only used green and red for those conditions, users with deuteranomaly would not be able to easily differentiate one from the other. We can combat this by adding another cue, such as a check mark or warning icon to indicate states.

 

That's not to say that you need to avoid color! Just make sure that it isn't the only cue. Imagine looking at your page in grayscale: would the right content still stand out? Is your content easy to scan?

 

 Use enough color contrast

### Color contrast guidelines

The accessibility guidelines for color contrast depend on the level of compliance. uConnect uses **AA-level** compliance, with for 4.5:1 contrast for all general text.

| **Element** | **AA Ratio** | **AAA Ratio** |
| --- | --- | --- |
| **General text** | 4.5:1 | 7:1 |
| **Bold small text** 14pt and larger (18.6px) | 3:1 | 4.5:1 |
| **Large text** 18pt and larger (24px) | 3:1 | 4.5:1 |

 

### Measuring color contrast in the Block Editor

The **Block Editor will do its best to warn you** when there isn’t enough contrast between the text and background; simply click on a text element and look in the block sidebar underneath the Color heading.

 

However, this is less reliable with text against image backgrounds. This example has adequate contrast, but the automatic color contrast checker is not able to sense the darkness of the background. You can use the Cover block to automatically darken a background image, then adjust its Overlay color and opacity for further customization.

 

![A Cover block is added within the Block Editor. It has a dark image background with white text. The sidebar displays a potential warning that ](https://support.gouconnect.com/hubfs/Knowledge%20Base%20Import/image-Feb-25-2026-06-53-02-4675-PM.png)

 

### Manually checking color contrast

When choosing colors in other areas (or just to double-check), use a tool to measure contrast, such as:

- [contrast-ratio.com](https://contrast-ratio.com/)
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
- [Siteimprove Contrast Checker](https://www.siteimprove.com/toolkit/color-contrast-checker/)

 

 

- [Get Started](https://support.gouconnect.com/articles/get-started)
- [AI Search](https://support.gouconnect.com/articles/ai-search)
- [Analytics & Data](https://support.gouconnect.com/articles/analytics-data#main-content)

    - [Outcomes Data](https://support.gouconnect.com/articles/analytics-data#outcomes-data)
    - [Platform Analytics](https://support.gouconnect.com/articles/analytics-data#platform-analytics)
    - [Google Analytics](https://support.gouconnect.com/articles/analytics-data#google-analytics)
- [Publish Content](https://support.gouconnect.com/articles/publish-content)
- [Manage Your Communities & Content Categories](https://support.gouconnect.com/articles/manage-your-communities-content-categories#main-content)

    - [Communities](https://support.gouconnect.com/articles/manage-your-communities-content-categories#communities)
    - [Content Categories](https://support.gouconnect.com/articles/manage-your-communities-content-categories#content-categories)
- [Manage Subscribers & Users](https://support.gouconnect.com/articles/manage-subscribers-users)
- [Platform Design](https://support.gouconnect.com/articles/platform-design#main-content)

    - [Widgets](https://support.gouconnect.com/articles/platform-design#widgets)
    - [Block Editor (WordPress)](https://support.gouconnect.com/articles/platform-design#block-editor-wordpress)
    - [Menus](https://support.gouconnect.com/articles/platform-design#menus)
- [Accessibility Hub](https://support.gouconnect.com/articles/accessibility-hub#main-content)

    - [Block Editor](https://support.gouconnect.com/articles/accessibility-hub#block-editor)
- [Market Your Platform](https://support.gouconnect.com/articles/market-your-platform#main-content)

    - [Activation and Promotion Guides](https://support.gouconnect.com/articles/market-your-platform#activation-and-promotion-guides)
- [Modules & Integrations](https://support.gouconnect.com/articles/modules-integrations#main-content)

    - [Outcomes Data Visualization](https://support.gouconnect.com/articles/modules-integrations#outcomes-data-visualization)
- [Technical Configurations](https://support.gouconnect.com/articles/technical-configurations#main-content)

    - [Automated Subscriber Uploads (SIS)](https://support.gouconnect.com/articles/technical-configurations#automated-subscriber-uploads-sis)
- [Product Updates](https://support.gouconnect.com/articles/product-updates)
- [Customer Training Recordings](https://support.gouconnect.com/articles/customer-training-recordings)
- [Candid Career+](https://support.gouconnect.com/articles/candid-career)
- [General](https://support.gouconnect.com/articles/general)

  

[![uConnect Logo](https://s41911.pcdn.co/wp-content/uploads/logo-white.svg)](https://www.gouconnect.com/)

- [Customers](https://www.gouconnect.com/customers/)
- [Case Studies](https://www.gouconnect.com/customers/case-studies/)
- [Client Directory](https://www.gouconnect.com/customers/client-directory/)
- [Testimonials](https://www.gouconnect.com/customers/testimonials/)

- [Product](https://www.gouconnect.com/product/)
- [Use Cases](https://www.gouconnect.com/product/use-cases/)
- [Integrations](https://www.gouconnect.com/product/integrations/)
- [Become a Partner](https://www.gouconnect.com/company/partner/)

- [Company](https://www.gouconnect.com/company/)
- [Careers](https://www.gouconnect.com/company/careers/)
- [News](https://www.gouconnect.com/company/news/)
- [Status Page](https://status.gouconnect.com/)

- [Career Everywhere](https://www.gouconnect.com/career-everywhere/)
- [The Movement](https://www.gouconnect.com/career-everywhere/movement/)
- [Community](https://www.gouconnect.com/career-everywhere/community/access/)
- [Podcast](https://www.gouconnect.com/career-everywhere/podcast/)

© 2026 uConnect Inc.

<https://www.linkedin.com/company/uconnect-inc-> <https://x.com/gouconnect> <https://www.facebook.com/gouconnect/> <https://www.youtube.com/channel/UCVzqw0N04626cZGwaffVZNw> <https://www.instagram.com/gouconnect/>

[Accessibility Policy](https://www.gouconnect.com/accessibility-policy/) · [Privacy Policy](https://www.gouconnect.com/privacy-policy/)