When designing a website, it’s easy (and fun!) to focus on layout and content. But one crucial element that often gets overlooked is color. Color plays a vital role in web accessibility, ensuring that all users—regardless of visual impairments or color vision deficiencies—can easily navigate and engage with your content. 

Proper color contrast is key to making text readable for those with low vision or color blindness. In this post, we’ll explore why color is so important for accessibility and how to create a color palette that ensures your website is inclusive and user-friendly for everyone.

Why color is important for accessibility 

Color, specifically color contrast, is central in ensuring web content is accessible, particularly for users with visual impairments, color blindness, or low vision. 

Someone with low vision may struggle to read text with poor contrast, such as light gray text on a white background. Users with color blindness may find it difficult to differentiate between certain colors, such as red and green, if the contrast is insufficient. High-contrast design helps bridge these gaps.

Not only that, accessibility isn’t just a best practice—it’s becoming a legal requirement in many parts of the world. The European Accessibility Act (EAA), taking effect in 2025, will require digital products and services, including some websites, to meet certain accessibility standards like sufficient color contrast, avoiding color-dependent information, and following Web Content Accessibility Guidelines (WCAG). Non-compliance could lead to fines, making accessibility an essential priority for businesses serving the EU market.

Beyond its impact on accessibility, proper color contrast also benefits all users, including those viewing content in challenging environments. Bright sunlight, low-quality monitors, or small screen sizes can make low-contrast elements harder to see for anyone. 

What makes a color palette accessible?

While color contrast is central to the accessibility of color, there are other things you can do to make the color on your site even more accessible. All of these elements come together to ensure optimal color accessibility:

• Sufficient contrast: Colors must have enough contrast between the text and background to meet WCAG—more on contrast ratios below. 
• Avoid relying on color alone: Information shouldn’t be conveyed through color alone. For example, add an underline to links or use icons to support color-coded elements.
• Color blindness considerations: Choose combinations that are distinguishable for users with common types of color blindness, such as red-green or blue-yellow deficiencies.
• Consistent use of color: Maintain consistency in how colors are used throughout your design. This helps users quickly understand an element’s meaning and function.
• Testing across devices: Colors may appear differently on various screens and under different lighting conditions. Testing ensures accessibility in real-world scenarios.

By considering all these elements, you can create a site that is both functional and inclusive.

What is a contrast ratio?

To better understand if your site’s color palette is accessible, it’s important to understand how color contrast is measured. 

Color contrast ratio is a numerical value that represents the difference in luminance (light intensity) between two colors, such as the text and its background. It is calculated as a ratio, with values ranging from 1:1 (no contrast, e.g., white text on a white background) to 21:1 (maximum contrast, e.g., black text on a white background). A higher ratio indicates greater contrast, making it easier for users to distinguish between the foreground and background elements.

The Web Content Accessibility Guidelines (WCAG) recommends a minimum contrast ratio of 4.5:1 for most text and images of text, and 3:1 for large text (at least 18 point or 14 point bold and above).

Example of a low contrast ratio

Take this example of a light green button with white text. It may look legible to you, but upon further inspection, using the Chrome Accessibility tools in the Chrome browser, the contrast ratio is quite low at 1.71:1. As such, the text on this button would be difficult for many users to read.

How to test for accessible color combinations

Testing color combinations for accessibility is straightforward with the right tools. Here are some of our most trusted tools for testing colors:

1. Chrome Accessibility Report: This tool is an easy-to-use resource built right into the Chrome browser when you want to quickly test a single page or element on your site. 
2. Equalize Digital Accessibility Checker: This freemium WordPress plugin from Equalize Digital goes beyond just colors to ensure your site is accessible to a wide range of visitors. 
3. WAVE Web Accessibility Evaluation Tool: A free tool you can use to scan any page on your site for accessibility issues. When you’re looking to improve colors, check for the “contrast errors” part of the report. 
4. Deque University contrast checker: Use this free tool to check a color combination you’re unsure about. 

Many design programs, such as Adobe and Figma, include built-in accessibility tools or add-ons that allow you to analyze color contrast directly within your design files, allowing you to address accessibility considerations early in the design process—even before development begins.

Some beautiful, accessible color combinations and themes

Finding accessible color combinations doesn’t mean sacrificing aesthetics. Here are some of our favorite high-contrast designs in the WordPress.com theme directory:

Koinonia

The Koinonia theme is ideal for building community-focused websites, such as nonprofits and churches. It features a clean, modern layout with a focus on readability and easy navigation. It adheres to accessibility standards, with features like proper color contrast, keyboard navigation support, and screen reader compatibility, which helps differently abled users access content effortlessly. 

Conference

The Conference theme is thoughtfully designed for event and conference planners, combining functionality with accessibility to create an inclusive experience for all users. Its design emphasizes clear, intuitive navigation and offers support for high-contrast color settings, ensuring content remains readable and usable for individuals with visual impairments. 

Fixmate

This theme from the WordPress.com team features clean, high-contrast text on light backgrounds, ensuring maximum readability for users with visual impairments. The theme adheres to accessibility best practices by using logical heading structures, keyboard-navigable menus, and link styling that avoids reliance on color alone for identification.

Want a more customized look? When you’re ready to build, WordPress.com makes it easy to define and implement an accessible color palette for your site on Premium plans and above. You can customize these themes with the colors of your choosing, but be sure to always verify your color contrast ratios and test them in different contexts, such as buttons, headers, and body text. 

A final word on accessible color

Accessible design is not just about meeting standards; it’s about creating experiences that welcome everyone. By prioritizing color accessibility, you’re taking a meaningful step toward a more inclusive web.

Want to learn more about building an inclusive WordPress site? Here are a few resources to get you started: 

• WordPress Accessibility Day
• WordPress Accessibility Standards
• WordPress Accessibility Team
• WordPress Accessibility Forum

Header tags are one of the most fundamental elements of a well-structured blog post. They guide readers through your content, improve accessibility, and help search engines understand your content’s structure.

But using headings properly requires more than just adding a few bold titles to your text.

In this post, we’ll walk you through how to use header tags effectively and why it matters for your WordPress site.

What are header tags and how do they impact SEO?

A heading is a title or subtitle that introduces a section of content on a website post or page. In HTML, headings are defined by tags ranging from <h1> to <h6>, with <h1> being the most important and <h6> the least. 

These tags indicate the hierarchy of your content, helping both readers and search engine robots understand how your ideas are organized. 

For example:

• H1: The post or page title
• H2: Main sections (this section of this very blog post uses an H2 header tag!)
• H3: Subsections under H2
• H4: Additional details under H3

Properly formatted headings dramatically improve the readability and scannability of your site as well, as they break up large sections of text.

How many H1s should you have?

One. A blog post should have exactly one <h1> tag, which serves as the main title of the page. Using multiple <h1> tags can confuse search engines about what the post or page is actually about and negatively impact your SEO. 

A good H1 should:

• Be clear and descriptive, reflecting the search intent.
• Contain your primary keyword.
• Be unique to each post or page on your site.

For example, say you’re writing a post about a skillet flatbread recipe. A good H1 (using the guidelines above) might be “Easy Skillet Flatbread Recipe.”

“The Recipe I Make Every Week” is an example of an H1 that isn’t clear or descriptive and doesn’t contain our primary keyword (“skillet flatbread recipe”).

How to avoid keyword stuffing in headings

A big benefit of using headings properly is to maximize the SEO potential of your post. While it’s tempting to load your headings with keywords (aka “keyword stuffing”) to start ranking for a particular keyword, this can do more harm than good. 

Keyword stuffing is a spammy tactic that can make your content sound unnatural and lead to poor-quality content that will rank poorly in search results.

Instead, focus on writing headings that clearly describe the content of the section using natural language. Incorporate keywords sparingly and only when they fit organically.

For example, instead of a heading that says, “Best Dog Beds: Top Dog Beds for Large Dogs That Nap,” a better, more readable heading might be, “The Best Dog Beds for Large Breeds.”

This will ensure your headings are reader-friendly while still supporting your SEO goals. It’s a win-win! 

If you’re worried your post might be keyword-stuffed, run it through this helpful SEO checker from SEM Rush. It will magically calculate the keyword density for the body, headlines, and meta description of your post. 

How header tags impact accessibility

Headings play an important role in making your content accessible to all users, including those who rely on screen readers. Screen readers use headings to navigate content, allowing users to jump directly to the sections they’re interested in.

When writing headings for accessibility, consider the following tips:

• Use headings to create a structure: Ensure your headings reflect the hierarchy of the post. For example, use H2s for main sections and H3s for subsections.
• Avoid skipping levels: Don’t jump from an H2 to an H5. This can confuse screen readers and make your content harder to navigate. In the next section, we’ll talk more about how to properly nest headings. 
• Keep headings descriptive: Avoid vague headings like “Conclusion” or “Details.” Instead, use headings that clearly describe the content, such as “Final thoughts on garden compost” or “Tips on how to make your own compost.”

You can learn more about the proper use of heading for accessibility on a WordPress site in this post, Improve Your Site’s Accessibility. 

Tools for testing heading accessibility 

Here are a few tools you can use as part of your publishing workflow to ensure your content is accessible:

• Chrome Accessibility Report: The Chrome accessibility report is an easy-to-use resource built right into your Google Chrome browser when you want to quickly test a single page on your site. 
• Equalize Digital Accessibility Checker: This freemium WordPress plugin from Equalize Digital goes beyond just headings to ensure your site is accessible to a wide range of visitors. 
• WAVE Web Accessibility Evaluation Tool: A free tool you can use to scan any page on your site for accessibility issues. When you’re looking to improve headings, check for the ‘structural elements’ part of the report. 

How to properly nest your header tags

Proper nesting of headings is essential for maintaining a logical flow in your content. Think back to your school days and treat your headings as an outline:

• H1: The main topic of your post or page
• H2: Sections that support the main topic
• H3: Subsections provide details or examples and are nested under an H2.
• H4, H5, and H6: Additional layers of detail as needed.

Here’s an example of correct header tag nesting:

<h1>A beginner’s guide to beekeeping</h1>

  <h2>Why keep bees</h2>

    <h3>Environmental benefits</h3>

    <h3>Personal rewards</h3>

  <h2>Getting started with beekeeping</h2>

    <h3>Basic equipment</h3>

    <h3>Choosing a location</h3>

    <h3>City regulations and permitting</h3>

Once in a while, you may be tempted to incorrectly nest your headings as a way to apply a particular style. Try to avoid this. Incorrect nesting can disrupt the flow and confuse both readers and search engines.

You can always adjust your site CSS to change the styles of your headings site-wide.

How many headings are too many?

The number of header tags you use depends on the length and complexity of your blog post. A good rule of thumb is to include a heading for every 300–500 words. This helps break up your content into bite-sized pieces, making it easier for readers to follow along.

If you have a 1,000-word blog post it might include:

• 1 <h1> tag as the title.
• 3-5 <h2> tags for major sections.
• A handful of <h3> tags for subsections, as needed.

Don’t overdo it, though. Too many headings can make your content look cluttered and overwhelming.

Additional tips for using headings effectively

When you’re asking yourself if and when you should add headings throughout your post or page content, follow these simple guidelines:

1. Keep headings short: Aim for headings that are concise and to the point. While Google doesn’t have a limit on characters, keep it focused on the search query.
2. Avoid overloading with styles: Headings should stand out visually, but don’t rely on excessive styling like all caps or bold text. Let the hierarchy and natural formatting do the work for you.
3. Test your headings: Preview your posts and pages to make sure your headings create a logical structure. Check how they appear on different devices, especially mobile.
4. Think about search intent: Use headings to address common questions your audience might have. This not only improves readability but also increases the likelihood of ranking in search engine results.
5. Use headings to break up dense content: Long paragraphs can be exhausting to readers. Use headings to segment your content into manageable sections.

How to edit header tags on your WordPress posts and pages

There are multiple ways you can add header tags to your content with WordPress. Let’s look at a couple different methods.

Add a title

This first one requires no extra work on your end! Woo hoo! 

By adding a title to your post or page, you’re automatically adding the one and only <h1> tag you need. WordPress takes care of this for you.

Use the Heading block

You’ll need to insert all other headings manually. Remember that header tags should be nested naturally. You’ll use the Heading block to add all H2s, H3s, H4s, H5s, and H6s to your posts and pages.

To add the Heading block, click the + Block Inserter icon and search for “heading.” Click it to add the block to the post or page.

You can also type /heading on a new line in the editor and press enter to quickly add a Heading block. You can also use markdown syntax by typing hashtags (#) in front of your heading text like this:

## Why I love this recipe

That will magically turn into an H2 heading because you used two hashtags! Use the appropriate number of hashtags to correspond to the header you’re wanting to use.

Be sure to explore our Heading block support article for even more information about the ways you can customize your post or page headings.

A final word on using header tags effectively

Headings are more than just decorative elements—they’re a tool for organizing your content, improving accessibility, and enhancing SEO. Keep in mind that the goal is simply to make your content as easy to navigate as possible. 

Whether your readers are skimming for key points or diving deep into the details, properly used headings will guide them every step of the way. 

The internet is a treasure trove of visuals, overflowing with inspiration and information. Images are what draw us in, keep us engaged, and help us learn, and create. But imagine the internet without those visual cues—navigating it would be a real challenge.  

Luckily, for people with visual impairments, those dealing with slower internet connections, and even the robots powering search engines, there’s a simple yet powerful solution: alt text (short for alternative text). This unsung hero of the digital world ensures that everyone can access and benefit from the images we often take for granted.

What is alt text?

Alt text is exactly what it sounds like—a description of an image that appears on the page. Simple, right? But there’s more to it than that. To write truly effective alt text, it’s important to understand why it matters, when an image needs an alt attribute (spoiler alert: not every image does!), and the best tools to help you make sure your images are covered. Let’s dive in and make your alt text work smarter, not harder!

Why alt text is important

Alt text isn’t just a box to check—it’s a powerful attribute that serves two important purposes: making your content inclusive and helping search engines understand your images.

Accessibility

Alt text provides a written description of an image for those who rely on screen readers or encounter issues loading images. It’s there to ensure that no matter the barrier—be it visual impairments or low-bandwidth connections—your content remains accessible and meaningful to all users.

Without proper alt text, you risk not only making your site inaccessible to visitors but also potentially violating accessibility laws like the Americans with Disabilities Act (ADA), which could result in fines or other legal consequences. Similar laws are found throughout the European Union, Canada, the Republic of Korea, and Australia—just to name a few. If you’re trying to make the case for an equitable online experience for your team, this is a great place to start.  

Want to learn more about building an inclusive online community? Here are a few resources to get you started: 

• WordPress Accessibility Day
• WordPress Accessibility Standards
• WordPress Accessibility Forum

Search engine optimization (SEO)

Search engine crawlers pull several key details from an image, including its file name, captions, title, and alt text. Among these, alt text is the most important for helping search engines understand the image’s subject within the page’s overall content. This information works alongside the other content on the page to enhance search engine algorithms, boost your rankings, and drive more traffic to your site.

When writing alt text, aim for clear, meaningful descriptions that fit naturally with the page’s content. Incorporate keywords thoughtfully, and most definitely resist the urge to overdo it—keyword stuffing not only disrupts the user experience but can also result in search engines penalizing your site as spam. 

Not familiar with keyword stuffing? Keyword stuffing is all about cramming in as many keywords as possible in an attempt to boost rankings on search engine results pages. This doesn’t work and often backfires. Here’s an example:

Keyword stuffed alt text: 

alt=”Cute kitten playing with a ball of yarn, adorable kitten, fluffy kitten, playful kitten, cute kitten image, kitten for sale, kitten pictures.”

Well-written alt text can both enhances accessibility and support your SEO strategy. Use your commonsense and keep your (human) site visitors top of mind. 

How to know which images need alt text and how to write it

After all that, you may be surprised to learn that not all images require alt text. In fact, it becomes an exhausting experience for some users with screenreaders to endure fluffy alt text applied to images that don’t provide any value. Luckily for us, the W3 has categorized web images and offered some tips about how to treat images within each category.  

Here’s how to write the right kind of alt text depending on what your image is for:  

Informative images: These are the most common images found on sites and include pictures, photos, or illustrations that represent concepts or information. Your alt text should give a short description that conveys the essential meaning of the image. 

For example, this image illustrates all of the integrations available with Automattic’s P2, but those integrations are not named in the accompanying content. It’s important here that the alt text provides that information for visitors that may not be able to see or load the image. It should look something like this: 

alt="Logos for available P2 integrations: Crowdsignal, Figma, Twitter, GitHub, YouTube, Vimeo, Google Calendar, and Loom"

Decorative images: If an image is just there to look nice and doesn’t add any important info, use a null alt attribute (alt=””). This tells assistive technologies to skip it.  

Functional images: If an image works as a button or link, the alt text should explain what it does—not what it looks like. 

For example, the alt text for a video icon might say “Watch this video about hibernating bees on Vimeo.”  

Images of text: If the image contains readable text (like a graphic with a quote or a logo), the alt text should include the same words.

Complex images: Charts, graphs, or diagrams need more detailed alt text to describe the data or information they present. You might even link to a longer description.  

Groups of images: If multiple images work together to convey one idea, the alt text for one of the images should cover the whole message. A good example of this would be process shots for a recipe or other how-to tutorial that includes steps. 

Image maps: For images with clickable areas, provide alt text that explains the overall purpose of the image, and include alt text for each clickable section describing where it leads. 

Not sure how to categorize an image? Check out the W3 Images Tutorial for help. 

While there are no official length guidelines, it’s generally recommended to keep alt text under 140 characters. Longer descriptions can become tedious when read by screen readers. Be descriptive, but stay concise—this is not the place for creative flourishes.

Tools to ensure your images include alt text

Chrome Accessbility Report

The Chrome accessibility report is an easy-to-use resource built right into your browser, when you want to quickly test a single page on your site. 

Alt Text Tools

The Alt Text Tools from the NerdPress team is a free, light-weight plugin that generates a CSV file of the images used in your content, along with their alt attributes.

Once the scan is complete (it’s very fast!), you can open the CSV file in the spreadsheet application of your choice. There you can quickly identify images that have missing alt attributes and scan for any that may need some improvement. The file also includes links to edit the posts where the images appear, making it quick and easy to update their alt attributes.

Equalize Digital Accessibility Checker

This freemium WordPress plugin from Equalize Digital goes beyond alt text to ensure your site is accessible to a wide range of visitors. If you and your team are committed to making your content accessible, this is a great resource. 

Equalize Digital also runs a Facebook Group and hosts a monthly virtual meet up for WordPress  developers, designers, and users interested in learning more about creating accessible websites that can be used by people of all abilities.

Alt text may seem like a small detail, but it plays a big role in making the internet more inclusive and user-friendly. By writing thoughtful, descriptive alt text, you’re not just improving accessibility—you’re also optimizing your content for search engines and enhancing the overall user experience. With the right approach and tools, adding alt text can be an easy step toward a more accessible and SEO-friendly site.

Start a blog on WordPress.com

Start optimizing your content with a blog hosted on WordPress.com.

Choose the plan that works best for your business, and let us manage the rest. With any WordPress.com plan, you get all the benefits of fast, secure managed WordPress hosting.