Short Answer: You are fine to change the sizes as long as there is still a clear visual hierarchy between H2-H6.
Short Answer:
Adjusted sizes will still be accessible - provided there is still a clear visual hierarchy between H2-H6.
Longer Answer:
When it comes to font size and accessibility, it is less about the specific font size and more about it's ability to play nicely with other elements and settings.
Here are a couple of examples:
Resizing
Does it adjust nicely by either zooming the page or changing a user's configured browser font size preferences?
The default font sizes in Canvas and DesignPLUS actually use em measurements instead of px, as these are designed to be relative to the font size set in the browser.
Clear Structure
This is one that you want to really watch: can users clearly distinguish the difference between the different heading levels?
If you make adjustments to sizes H2 to H4, but do not configure H5 or H6 to match the stylistic flow, this could be an issue. It's a good idea to create a sample page that includes every Heading (H2-H6) in order, and then give it the visual test:
- Does it have a clear visual connection when you move from header to header?
- Or does it ever appear as though you have moved up a level instead of down?
The defaults in Canvas and DesignPLUS are set in such a way that H6 is about as small as you would want to go in your font sizing. So, you should be okay if you are making the fonts for H2-H5 larger or adding other visual indicators that one heading is more prominent than another (by using borders, font-weight, underlines, etc).
However, if you are making the Header font sizes smaller and you hit a point where it is hard to tell the levels apart (or if the text ends up too small to comfortably read), you should likely adjust your approach.
Example: Canvas Headings
By default, in Canvas, each Heading's font size decreases with it's associated level, so H2 is the largest, and H6 is the smallest. You would want to replicate a similar font size structure, from H2 to H6.
Example: DesignPLUS Themes
When using DesignPLUS Themes, you'll see that Headings have been set to indicate hierarchy both with font sizes and other elements, such as backgrounds and borders.
