Creating an Accessible Color Palette for Oracle APEX Universal Theme

During a recent Oracle APEX development project, I had to customize the application’s theme to bring it into alignment with client brand standards. I have always appreciated how straightforward and effective APEX’s Universal Theme makes these changes. By clicking the Customize > Theme Roller option in the developer toolbar, we are given a number of tools to change the look and feel of our application, as well as convenient ways to save, view, and switch between different themes.

Given all of the thought and energy that goes into it, it was a surprise to me, then, to open Theme Roller and see that Universal Theme ships with a color palette that fails accessibility contrast standards.

While this is disappointing, there are also other small issues with the default color palette. The last two colors are shades of gray. Some colors have light text, others have dark, and light and dark text don’t seem to have any reason.

These colors might rarely be used for rendering page elements that need to pass contrast tests for readability of text. After all, they are accents, not the background of a report. Still, there might be a better solution. For this I’m glad that APEX provides a declarative rendering of your color selections scores that updates automatically in an easy-to-read fashion. Knowing this, I set out to create a color palette that met the following criteria:

• It should pass accessibility contrast tests. 4.5 is an acceptable score. The highest score is 21, which is black text on a white background. The worst score, 1, is black text on a black background.
• It should use all black text or all white text to maintain uniformity.
• Bonus points for passing with both white text and black text.
• It should be eye-pleasing without being distracting.
• It should be balanced without being bland.
• It should be versatile.
• It should use all 15 spaces allowed for custom colors.

The Method

I chose to use an HSL color picker (Hue, Saturation, Lightness) and to calculate my selections, spacing them using the Hue value (0º–360º) based upon the 15 available custom colors Universal Theme provides, while leaving the Saturation value at 100%. Those initial values would provide a starting point for the color, and I could then use the Lightness value to dial the shade in and test for contrast using both white and black text against them.

The Result

Using this method, I have been able to create a color palette I would feel comfortable implementing in future Oracle APEX development projects that don’t have specified brand standards. Here are two different renderings of the results:

There are three interesting points about the resulting theme that I think could use some improvement in the future. Two of the colors come close without completely passing the accessibility contrast test for both black and white text (#008A37, #007E9E). They come very close, but don’t quite reach 4.5 scores for both.

Also, some of the green shades appear too similar for my taste. In both cases I placed those colors later in the palette in hopes of using them less frequently. The final point is that while these colors pass contrast accessibility tests for both black and white text, I strongly prefer using white text. While it technically works, the black text seems more difficult to read.

Developing a color palette that passes contrast testing for both light and dark text was certainly a good first step, but now I wanted to see if I could use a similar method to produce another color palette. This time I wanted one that was similar but geared toward black text on a lighter background, as black text is so frequently the default throughout websites and applications. I still wanted to maintain similar principles, but to increase the contrast so that the text and background would be easier to read.

The result was a series of background colors that skew toward pastel, but truly achieve something different and effective. The colors are subtle, but achieve the desired effect of being beautiful, legible, and versatile.

Feel free to implement this color palette in your applications, or to tweak and improve them as you wish. Also, please let me know what solutions you have used in applications you have built.

Stuck on a challenging APEX project? Traust provides expert Oracle APEX application development — and training for your team! Contact us today for more information.