Use our tools

Tools that the Nucleus team has collated and used.

We use tools in our everyday, here are a few that we find useful.

Drag and Drop tool

https://nucleusdesign.netlify.com/

Accessibility tools

A collection of accessibility tools.

SortSite

https://www.powermapper.com/products/desktop/try/ A website accessibility checking tool.

Total Validator

https://www.totalvalidator.com/ Total Validator will validate your HTML and CSS, check that pages are accessible, run a spell check, and check for broken links. Performing a one-click validation of your website.

Web Accessibility Toolbar

https://developer.paciellogroup.com/resources/wat/ The Web Accessibility Toolbar (WAT) has been developed to aid manual examination of web pages for a variety of aspects of accessibility.

WAVE Web Accessibility Evaluation Tool

http://wave.webaim.org/ Web accessibility evaluation tool.

Colour Contrast Analyser

https://developer.paciellogroup.com/resources/contrastanalyser/ The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.

Sim Daltonism

https://michelf.ca/projects/sim-daltonism/ Sim Daltonism lets you visualise colours as they are perceived with various types of colour blindness. Use the camera on your iOS device, or use the Mac app to filter a region of the screen. Sim Daltonism is open source.

Colour Contrast Analyser for Sketch

https://github.com/getflourish/Sketch-Color-Contrast-Analyser This plugin will allow you to test the accessibility of your designs for users who are colorblind, while you work directly within Sketch. ‘Color Contrast Analyzer’ gives you the ability to calculate the color contrast ratio of two layers (or a single layer against the artboard), and evaluate that value against WCAG standards.

Using another tool?

If you use any other tools that you think we should include, please get in contact with the Nucleus Design System Team.