Welcome to Astral Accessibility!

Astral accessibility is a widget in Angular application that provides reading accessibility functionalities like text size, text line height/spacing, text reader, contrast, invert, saturation. It is located at the bottom right corner of the application.
Screen Reader

Screen reader is a tool where it would reads out texts on screen where user clicks on. For any html elements, if an aria label is available, the content from aria label would be read out loud, otherwise, it reads the text content of the element. There are 3 different speeds, normal, fast and slow.


Contrast is a tool that removes background and replaces it with black or white to increase the difference in colours between text and the background to increase legibility. There are 3 modes, the invert colours, high contrast, and dark high contrast.


Saturation is a tool that adjusts how colourful the colours are on screen, it has 3 different modes to lower saturation, increase saturation, or remove all the colours on screen (black and white).

Bigger Text

Bigger Text is a tool that increases the size of the texts on screen.

Text Spacing

Text Spacing is a tool that increases the spacing between each character on the screen to increase legibility and readibility.

Screen Mask

Screen Mask is a tool which dims the background and has a horizontal focus area which follows the cursor sliding horizontally.

Line Height

Line height is a tool which increased the line height to increase readibility.

Check box demo


Example links