Reformat a11y resources guide and add a resource (#18547)

* Reformat a11y resources guide and add a resource

I added a resource to an accessible color palette builder, as well as did some reformatting.

Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. 

Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers.

* Update index.md

client/src/pages/guide/english/accessibility/accessibility-tools-for-web-developers/index.md

@@ -5,41 +5,49 @@ title: Accessibility Tools for Web Developers
 
 There are many tools and online resources that can help you to ensure that your web application meets all of the accessibility requirements.
 
-1. **<a href='https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en' target='_blank' rel='nofollow'>Accessibility Developer Tools</a>**
+### General 
+
+- **<a href='https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en' target='_blank' rel='nofollow'>Accessibility Developer Tools</a>**
 
    This is a Google Chrome extension that will add a new Accessibility sidebar pane in the Elements tab to the Chrome Developer tools. This new pane will display any properties that are relevant to the accessibility aspect of the element that you are currently inspecting. This extension also adds an accessibility audit that can be used to check whether the current web page violates any accessibility rules. 
 
 
-2. **<a href='https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US' target='_blank' rel='nofollow'>aXe</a>**
+- **<a href='https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US' target='_blank' rel='nofollow'>aXe</a>**
    
    This Google Chrome extension can find accessibility defects on your web page.
 
-
+- **<a href='http://khan.github.io/tota11y/' target='_blank' rel='nofollow'>tota11y</a>**
-3. **<a href='http://colorsafe.co' target='_blank' rel='nofollow'>Color Safe Palette Generator</a>**
-
-   This website can help you to create a color palette that is based on the WCAG guidelines for text and background contrast ratios.
-
-
-4. **<a href='http://www.checkmycolours.com' target='_blank' rel='nofollow'>Check My Colours</a>**
-
-   A website for checking if your existing website meets the accessibility requirements for color and contrast.
-
-
-5. **<a href='http://colororacle.org' target='_blank' rel='nofollow'>Color Oracle</a>**
-
-   An application that simulates color blindness. It is available on Windows, Mac and Linux.
-
-
-6. **<a href='http://khan.github.io/tota11y/' target='_blank' rel='nofollow'>tota11y</a>**
 
    An accessibility visualization toolkit that checks how your website performs with assistive technologies.
 
 
-7. **<a href='https://www.accesslint.com' target='_blank' rel='nofollow'>AccessLint</a>**
+- **<a href='https://www.accesslint.com' target='_blank' rel='nofollow'>AccessLint</a>**
 
    A GitHub app that checks your pull requests for accessibility issues.
 
 
+### Color Contrast
+
+- **<a href='http://colorsafe.co' target='_blank' rel='nofollow'>Color Safe Palette Generator</a>**
+
+   This website can help you to create a color palette that is based on the WCAG guidelines for text and background contrast ratios.
+
+
+- **<a href='http://www.checkmycolours.com' target='_blank' rel='nofollow'>Check My Colours</a>**
+
+   A website for checking if your existing website meets the accessibility requirements for color and contrast.
+
+
+- **<a href='http://colororacle.org' target='_blank' rel='nofollow'>Color Oracle</a>**
+
+   An application that simulates color blindness. It is available on Windows, Mac and Linux.
+
+
+- **<a href='https://toolness.github.io/accessible-color-matrix/' target='_blank' rel='nofollow'>Accessible Color Palette Builder</a>**
+
+   This website allows you to edit a color palette and will create a table showing all of the possible color combinations, telling you which ones are accessible and which combinations to avoid using.
+
+
 ***
 
 #### More Reources