Sticky: Accessible Flounder

Download

Direct Download

You can download the latest version of Accessible Flounder from my website by clicking here.

On WordPress.org

You should also be able download and install Accessible Flounder on your WordPress.org blog by using the WordPress.org Theme Finder soon. (I will update this link when it is available.)

What is Accessible Flounder?

Accessible Flounder is a child theme of Kelly Dwan’s Flounder theme.

I installed Flounder on my blog in 2015 and liked it quite a bit, but eventually realized that the theme’s colour choices are not accessible, largely because of issues with contrast like those described in this post by WebAIM.

For a long while I looked around trying to find an alternative, but couldn’t find any I liked as much as Flounder. (Flatfish, another Flounder child theme, is even worse when it comes to contrast, with a gray-on-gray-on-gray design that makes menu items almost illegible even for me, someone with pretty decent vision.)

Eventually I decided to just create a new child theme called (very creatively) Accessible Flounder.

Accessible Flounder is a bit less vibrant than its parent, but has the benefit of actually being legible for pretty much everyone.

How Accessible is Accessible Flounder?

As of February 19, 2016 (v1.0.0), Accessible Flounder conforms to the W3C’s Web Content Accessibility Guidelines at the AA and AAA level. The theme should also be “accessibility ready” as defined by WordPress.

In order to make sure your content itself is accessible, please make sure you follow the accessibility guidelines set out by the WordPress Codex.

Testing of the theme was done using WebAIM’s WAVE tool with my home page content as of February 19, 2016.

Questions or Comments?

If you have questions or comments about the theme, please feel free to e-mail me at stewart.c.baker@gmail.com or comment on this post.

Version History

Current Version (1.0.0, released 2016-02-19)

This is the first release of Accessible Flounder. Changes made to the original Flounder theme consisted almost exclusively of making header and link fonts black and changing background colours so that there was enough contrast for text to be legible.

Specific Changes

  • Use black for header fonts, meta links, and other currently low-contrast areas
  • Use a single colour for post content background, regardless of post type
  • Modify background colors of widget headers and post-type headers to a level that passes WCAG’s contrast test
  • Modify foreground colors of second-level headers to pass WCAG’s contrast test
  • Modify “header” on archives and other pages to pass WCAG’s contrast test

Comparison with Flounder

Below are some screenshots showing the difference in contrast in various parts of Flounder versus Accessible Flounder. The easiest way to compare the two themes is to install both on your WordPress.org instance and switch between them.

“Standard” and “Chat” post-types

Flounder

Image of the Standard and Quote post-type colours in Flounder Standard and Quote post-type colours in Flounder

Accessible Flounder

Image of the Standard and Quote post-type colours in Accessible Flounder Standard and Quote post-type colours in Accessible Flounder

Page header

Flounder

Image of a Page Header in Flounder Page Header in Flounder

Accessible Flounder

Image of a Page Header in Accessible Flounder Page Header in Accessible Flounder

Page

Flounder

Image of a Page in Flounder Page in Flounder

Accessible Flounder

Image of a Page in Accessible FlounderPage in Accessible Flounder

Widgets

Flounder

Image of Widgets in Flounder Widgets in Flounder

Accessible Flounder

Image of widgets in Accessible Flounder Widgets in Accessible Flounder