Sometimes you may want to adjust your website to improve the readability and accessibility and it is good web design practice to take accessibility into account. On Rocketspark, there are different ways you can improve accessibility for your website.
In this guide:
How to improve Readability
What accessibility features are available on Rocketspark?
How to Improve Readability
- Go to your Change Design Section and click on Headings & Paragraphs
- In the Headings & Paragraphs section follow the guidelines below:
- Set your Paragraph font to 16px
- Set your Small Heading to 24px, Medium Heading font to 32px and Big Heading to 40px. (You can have bigger headings as you like, it’s not a rule but do make sure people can distinguish the different heading sizes in the hierarchy).
- Choose an accessible font, eg.: Source Sans Pro, Helvetica, Lucida Sans, Arial, Tahoma, Verdana - To set the line height and letter spacing Click on the 3 dots next to each heading/paragraph setting.
- For 18px paragraph 1.4rem and 1.5rem work well however may vary depending on your font choice so check the visual aspects of it and test with people around you if they can comfortably read the text.
- The line-height for headings is usually smaller than the body text, by default we use 1.2rem. - Click on the Colour picker, next to the font size to choose the font colour
- For long pieces of text, avoid using pure black (#000000) in a pure white (#FFFFFF) background due to high contrast.
- We would recommend using a dark grey instead - eg.: #333333
Please check out the following guides on how to further improve readability on your site
What accessibility features are available on Rocketspark?
For a quick reference for what you can or can’t do for accessibility on Rocketspark, check out below
Responsive websites All Rocketspark sites are designed to be responsive, not just mobile-friendly. Designers are able to customise the looking of their website on mobile devices. |
![]() |
Customise colors Color and contrast are key factors that determine a good web design for people with disabilities. Choose your brands colour or choose from the color picker. Ensure you test your color contrast here |
![]() |
Choose the right font Not all fonts have been designed with web accessibility in mind. Choosing the right font improves the legibility and readability of your site for everyone. |
![]() |
Accessible templates We create templates that comply with designing for accessibility best practice. |
![]() |
Accessible button size On Rocketspark, we’ve pre-defined the button size for your site. For accessibility, we recommend using the “standard” size, then you just have to choose the style that matches better with your site’s look & feel. |
![]() |
Description below images Stacks allow you to add a description below any image. Ensure you provide a brief description of the image for screen readers |
![]() |
Heading Hierarchy Visualize heading hierarchy as h1, h2, h3… to help you create consistent content. H1, h2, h3… were developed to assist designers when creating a website to convey the logical hierarchy of the texts on your page |
![]() |
Input form error focus When dealing with required inputs on a form sometimes the user can miss a required field. For that reason, we display a message in written text with input focus. |
![]() |
Keyboard control Navigate through the website using the keyboard |
UserWay widget (paid plan) |
Control colour contrast |
UserWay widget (free plan) |
Highlight links Links are highlighted to distinguish from the body text |
UserWay widget (free plan) |
Bigger text Increase text size up to 4 times |
UserWay widget (free plan) |
Limit animations Animations may slow down your website visitors’ connectivity and potentially lead to difficulties. UserWay allows you to turn off animations. |
UserWay widget (free plan) |
Legible fonts Designed to increase readability for readers |
UserWay widget (free plan) |
Dyslexia friendly font The typeface enhances the readability for those with dyslexia and provides them with a fluid reading experience that is tailored to their needs. |
UserWay widget (free plan) |
Increase cursor size Assist users with visual impairment or sensory issues to find their cursor more easily. |
UserWay widget (free plan) |
Reading mask and reading guide Add a reading mask or guide to help web visitors to perceive and understand your content. |
UserWay widget (free plan) |
Add tooltips Tooltips are readable with a mouse to provide relevant information or to communicate a message that may be helpful to understand a context. |
UserWay widget (free plan) |
Line height and text-align Adjust your text to improve the readability. |
![]() |
Contrast ratio in the color picker You can also check color contrast here |
Currently not supported |
Characters recommendation for long text For better readability and comfort, we recommend keeping the body text characters to 45-75. |
Currently not supported |
For more information on how to add UserWay widget, check this help guide
At Rocketspark, we are committed to ensuring that everyone can use our platform, regardless any disabilities. For that reason, we are taking in consideration accessibility feature requests to continue creating better experiences for people. Please contact our support team to request a feature for our potential future development.