Everyone is a Designer

Speaking notes from talk in May 2017 on document accessibility #a11yto

As promised, here are my speaking notes from my 20 minute talk on document accessibility at the #a11yTO Meet-up on Wednesday, May 24th 2017 in Toronto:

Designing Accessible Documents

Introduction

Graphic design is everywhere – from the label on the beer bottle you’re holding, to the book you were reading on the way over here, to all the ads you saw along the way. Graphic design plays a big role in our lives – it’s about conveying a message to the widest possible audience. At its core, graphic design is about accessibility.

Agenda

We are here today to learn how easy it is to create attractive, accessible, digital documents. Now, I’ve only got about 20 minutes to talk to you today, so it’s going to be impossible to touch on everything you need to know. For those of you who are new to this sort of thing, I hope you will leave with practical skills and tools you can use right away in your personal and work life. And for those of you here today to which this is old hat, I hope I can entertain you.

Font

Font – typography – was my first love when it came to graphic design.  They express content through the visual representation of letters that form words through pattern recognition in our brains. Reading is a form of pattern recognition. The faster we can recognize the letters on a page, the more legible a font is. So although fonts can be a place of artistic expression, their main purpose is to be recognized as letters and read as words.

As an extra-young designer, I thought I could change the world with fonts – making a font that was both legible, and comfortably readable over an extended period of time. It was here that I discovered there was no definite answer to fonts – studies contradict one another, individuals have unique preferences, and there was no one size fits all for accessibility. But there are best practices:

Image showing different font weights

Characteristics of a Legible Font

  • Choose fonts that are medium in weight – avoid heavy, condensed or light fonts
  • Avoid script or decorative fonts – these are best kept to titles only
  • Choose common fonts – these are read more easily as the viewer is already familiar with the patterns they form on a page.

Image showing underline, italic, bold, and tight spacing of letters

Font treatment

  • Avoid excessive use of bold, italics, underline, or ALL-CAPS – this disrupts pattern recognition and makes it harder to read
  • Avoid tight spacing between letters and lines of text (kerning, leading)
  • Generally aim for body text that is 10pt to 14pt in size on a standard letter sized piece of paper

Image showing multiple fonts at thesame point size that look different in size

Font Size

Now I want to take a moment to talk about font size. When most people think of an accessible document, they think large type. However, font sizes are relative! 12pt in one may look like 22pt in another. And the beauty of digital documents, like PDFs or ePubs or HTML, is that it is scalable – the person can make it as big as they want. Giving a blanket statement like “All documents must be a minimum of 12pt.” is playing it safe. The intention is good but it doesn’t deal with design integrity or variables.

It is our responsibility as designers to speak to the widest possible audience. If making text 12pt for a project with small dimensions, such as an ad in a newspaper, is going to make everything squished and unreadable, we need to inform the client and take a different approach. There is no one-size fits all to accessibility – and that is why the Information and Communication Standard of the AODA is so open to interpretation, especially when it comes to print media.

Colour

When it comes to accessibility, font is often forefront in our minds – but what about colour and contrast? It’s often overlooked, but it’s one of the few things in the Web Content Accessibility Guidelines, WCAG, referenced in the AODA that can be applied to both web and print.

Image listing level AA and triple A WCAG requirements

Contrast Contrast Ratios

WCAG is very specific when it comes to contrast ratios for colours used for text within a document. 4.5 to 1 is the minimum contrast ratio when it comes to finer text, like body copy, meaning it needs to be 4.5 times the intensity of the background colour. When it comes to larger text, like headlines and titles, we can dip down to 3 to 1 because these are relatively larger and more visible from a distance. These are minimums however, and aiming for 7 to 1 or above is ideal.

Contrast is important. The higher the contrast, the more likely the document can be read in different lighting environments and different screens. Remember that not everyone has a 4K retina screen or a quality mobile device. Designing to meet 7:1+ helps to ensure people with different abilities, technology access, and reading environments can read your document!

The AODA has specific dates for when different sized and types of organizations need to adhere to these contrast ratios in their websites and web content. You can check those out in the Information and Communication Standard.

Colour is more than just contrast – many people are colourblind too! So using just colour to denote meaning, like red to flag an error, is not inclusive – but using red, an asterisk, and the text (required) would help people know that an error has occurred – something you often see in online forms. The more ways you can express a message, the better.

As a designer working mostly on products for print that are posted online as a PDF with strict budgets, most of my text is on white paper. Ink is expensive after all. This can make it challenging to create bright and cheerful colour palettes, especially using colours like green, yellow, or orange as these colours tend to be quite close in luminosity to white. Blues, purple, and earthy tones are easier to work with on white backgrounds.

Colour Demo

One of my favourite tools to asses colour is Paciello’s Colour Contrast Analyzer. It’s a free desktop app for PC and Mac. Simply click on the colour picker, then select your foreground colour, click on the eyedropper again and select the background colour surrounding your text. I love how easy this is to use and how you can assess literally anything on your screen. It can be a lot of fun!

If a colour contrast fails and you’re unsure what to try, just copy the hex code from the Analyzer and paste it in Tanaguru Contrast-Finder – this web app will suggest similar colours that pass. I love this app!

Image text showing heading levels in a document: heading 1, heading 2

Hierarchy

Being able to look at a page and figure out quickly what is the message and the order in which its suppose to be read is incredible valuable! Fortunately, this is worked into the core principals of design through the use of negative space, proximity, and scale.

Negative space is the white space on a page. You want there to be ample negative space between elements to give the eye a place to rest. Proximity helps to show what content is related and the order of which to read. Scale helps to show importance, like the size of headings on a page.

Machine Reading

You can use negative space and type treatment to control the eye in visual representation of info, but how can you do that for machine-reading? For your eReader or screen-reader for example? You do that with tagged headings!

Now you don’t need to be a coder to do this sort of thing. All you need to know is how many headings you have and their relation to one another. So, heading 1 would be the first heading on the page. If Heading 1 has a subheading, then that would be Heading 2.

You can find these headings in Word under Styles, which you can customize to look just like you want! If you’re using graphic design software like InDesign, you would map the tags to the Paragraph Styles you created for your document. The default for both is paragraph – the P tag. If you were to export a PDF without using Styles, everything will default to paragraph text. You don’t want that – unless your document has no headings of course.

There are also great curb cuts to using Styles too, like automatically generated table of contents or linking references within a document. Tagged headings are an all-round great thing to use! It also enables you to change the look of all your headings at once. If your client comes to you and decides they want all the headings in Verdana instead of Gotham (font), you just have to edit the style once instead of going through the document page by page.

Other Tips

Outside of tagging, there are other things you can do to control the way content is read by a computer.

  • Word: Avoid using text boxes – they can be read in unintentional places, even if anchored
  • InDesign: Avoid using multiple text frames – they will increase the chances of reading order going rogue when you export to PDF.
  • Both: Don’t use keystrokes to format your content (tab and enter) – it doesn’t reflow or read aloud properly, and the keystrokes maybe read aloud too
  • Both: Don’t use tables to format your content – if it doesn’t have a header row, then it is not a table.

Instead, use the built in formatting tools to layout your content:

  • Word: columns, breaks, space before and after, lists
  • InDesign: split/span, space before/after/offset, lists

And a handy tip – if you want to see how your document is structured, turn on hidden characters. This will show you what keystrokes and breaks are used. And if you’re using PowerPoint or Word, turn on the Navigation Pane to make sure your content is there.

I’m not going to go into testing/remedification in the time we have remaining, but NVDA is a great free screen-reader you can test your documents with – and just tabbing through your document with a keyboard only is a good way to test out your document in addition to using automated accessibility tools like those found in Word, Adobe Acrobat, and PAC.

Resources

So that’s it! If you want more in-depth information on document accessibility, I recommend Karen McCall/Karlen Communication’s conference handouts and Access Ability by the Registered Graphic Designers, RGD. If you’re fresh to this, Accessibility of Office Documents and Office Applications, ADOD, and WebAIM are great places to start (and refer back to). There’s lots of other great resources out there too – these are just some of my favourites.

Feel welcome to check out the Resources page on my blog for more guides, reports, and tools.

How to Markup a PDF

Why should I mark-up a PDF?

Using comments and annotations to digitally mark-up a PDF help to reduce miscommunication, typos, errors between you and your graphic designer. It increases clarity, and helps to speed up the revision process. It’s a win-win for both you and your designer!

When you mark-up a PDF, the designer gets an automatically generated checklist of your requested changes to help them keep track of what they need to do and what tasks they’ve completed as they go along. When paired with clear communication, a designer can easily understand what needs to be done, changes to me made or content deleted, and areas to approach differently – all in one place!

It is fast, efficient, and clear.

How do I add annotations and comments to a PDF?

Setting-up Your Workspace

Most computers have an PDF reader on them. Acrobat Reader is the most widely used one out there. You may already have it on your system without even knowing it! If you don’t see Adobe Reader in your Applications folder, you can download it for free online:

Download Adobe Reader DC 

Screenshot of the View dropdown menu in Acrobat XI

Older versions of Adobe Acrobat Reader:

  1. Open the PDF in Adobe Reader
  2. In the upper toolbar, click View.
  3. From the drop down menu, select Comment > Annotations
  4. A selection of Annotation tools will appear to the right of your screen.

Adobe Acrobat Reader DC:

  1. Open the PDF in Adobe DC
  2. In the upper toolbar on the far left, click “Tools”
  3. Scroll down to “Review & Approve”
  4. Click “Comments”
  5. A selection of annotation tools will appear in the upper section of your screen.

Screenshot of the tools in Adobe Acrobat Reader DC

Getting Started with PDF Mark-up

There are many ways to approach the feedback process with PDF mark-up. To help get you started, here are some tips on when and how to use the annotation and comment tools in Reader:

General Feedback

Yellow speech bubble Comment bubbles are for providing feedback and instruction to the designer.

If multiple people are commenting on a document, please delete any unnecessary comments (such as internal conversations or unanswered questions) and leave only what is relevant to the designer. This will prevent any confusion and help the revision process go more efficiently.

Drawing and markup tools in Acrobat XI

Use shapes to draw attention to certain areas of a document. This is a rarely used tool in my experience – but its good to know its there for the odd occasion you need it.

Text Changes

Text icon with a red strikethrough The red strike through is used for deleting text.

Text icon with blue strikethrough and blue arrow next to it The blue strike through is for replacing text.

Text icon with blue arrow next to it The insert text tool for adding new text.

Highlighter icon in Acrobat XI The highlighter tool draws attention to a certain area of text.

If providing new text, avoid the temptation to write “Please replace with…” or to make conversation with the designer within your annotations. Instead, just add the new text. That way the designer can just Select All and paste in the document. This saves you both time!

Changes to Visual Elements

Paperclip icon You can add files, such as images, with the paper-clip icon.

When sending an image to be used in the design, graphic designers usually prefer images be sent separately so that  we can import them directly into our working project folder.

Additional Notes:

Repeated Consistent Changes:

If you are giving direction that applies to the whole document, you only need to say it once, not each time you come across it in the document. Examples of this would be “Align all text to the left in this document” or “Remove all full-page images/blank pages in this document” (note the word all here). This will save you from typing it out numerous times and cluttering up the PDF with redundant text.

Need More Information on Marking-up PDFs?

If you need more guidance, there are lots of video tutorials, written instruction, and posts on PDF mark-up online. Just google your query, or check out these links: Reader XI (older version that these instructions were initially written for) and Reader DC (newest release of Reader).

Screenshot of a marked-up PDF
Sample of a marked up PDF as viewed in Acrobat Pro DC.

PDF Mark-up Pet Peeves

Padding Statements

If you want your graphic designer to do something, just tell them to do it! Do not pad it with wishy washy language like “Maybe you could try…” or  “What do you think if…” or “… but you’re the designer.” unless you actually do want to know what your designer’s professional thoughts on the subject before they complete the task.

PDF annotation is not the place for discussion. It is for direction. If you actually do want to discuss a design idea with your designer, do it over email or phone or someplace else.

Respect your designer’s time and save yourself the extra typing. Just type what is needed in clear, concise language. Nothing more in the PDF.

Identifying the Rejects

Do not mark the rejects during concept development. Only mark the pages you like/have changes to/want elements from. Making a concept “Don’t like this.” or “Not this one” for example, makes yourself extra work, clutters up the document annotation checklist, and takes the focus away from what needs to be done in the document.

However, if there is something about a reject you want the designer to know like “We don’t like this concept because its too dark. Please try this layout with brighter colours” that is different. You are identifying why you don’t like the concept and directing the designer to approach it in another specific way.

Writing a Novel in Comment Bubbles

I have had over a page of text in a single comment bubble… which I was able to summarize down to fit on a single post-it note on my desk. Again, save yourself time and the designer’s time by being clear and concise in your instruction. Save your novel writing for after-hours.

 

How to add ALT text to image metadata

These instructions are written for InDesign users and people working with graphic designers, but could be applied to other applications and fields as well.

Although images cannot carry actual alternative (ALT) text around with them, you can add the ALT text to the metadata of an image to use as you please. This aids in efficiency and reduces chance of error when applying ALT text to images.

This post covers two methods for collaborating with your client/communications on applying image metadata:

  • Adding ALT text to image metadata on their PC (no special software required – free!)
  • Adding ALT text to image metadata using Adobe Bridge (subscription required)

Alternatively, the designer can do the above if the client is unable to.

Followed by three different methods for graphic designers listed below:

  • Applying the image metadata as ALT text manually in InDesign via Object Export Options
  • Applying the image metadata as ALT text in InDesign using a Script (my personal favourite)
  • Applying the image metadata as ALT text in InDesign using Object Styles

Screenshot of image properties, details tab open

Client:

Adding ALT text to the metadata (PC/Windows):

  1. Select your images and write out your alternative (ALT) text.
  1. Open the folder where your images are kept (ex: Pictures folder in Windows)
  2. Right click the image
  3. Select “Properties” from the drop-down menu.
  4. Click the “Details” tab.
  5. Paste your ALT text into the “Title” input field of the photo
  6. Click OK (this will save the metadata)
  7. Send the photos with the metadata to your Designer/Design Request. Inform your designer that you have put the ALT text in the Title/Description field of the photo’s metadata.

Note: Instructions above written for Windows 7 users.

Faster Alternative: Adobe Bridge

If your client has an Adobe Creative Suite license, they can do these steps faster in Adobe Bridge, where they would put the ALT text in the Description OR Headline field of the image metadata.

Screenshot of the script panel in InDesign and ALT text script dialogue box

Designer:

Below are instructions on 3 different methods to apply image metadata to your images as ALT Text within InDesign: using a script, doing in manually, or using Object Styles. Choose the one that works best for you:

Applying ALT text with a script

  1. Confirm you are using the photos with the metadata (can double check by opening in Adobe Bridge – text will likely be in the Description field)
  2. Run the ApplyALTfromXMP script
  3. Confirm the ALT Text Source is “XMP: Description” (or wherever else the ALT text is saved)
  4. Click OK
  5. If successful, you will get a dialogue box with total number of images processed displayed. Click OK.
  • If you do not get the quantity you were expecting, confirm the location of the ALT text in the metadata.
  • If you do not get a dialogue box, something is wrong with the script and you’ll need to troubleshoot.

ALT Text Script:

If you do not have the ALT text script installed, you will need to install it yourself. Instructions and free download are at Batch Apply XMP ALT Tags to EPUB and HTML Images

Screenshot of the object export options window in InDesign

Applying ALT text manually

  1. Confirm you are using the photos with the metadata (can double check by opening in Bridge – text will likely be in the Description field)
  2. In Design, select the photo
  3. Go to Object in your top navigation bar
  4. Select Object Export Options from the dropdown menu
  5. Confirm you are in the ALT text input area
  6. Click “Text Source”
  7. Select “Description” from the dropdown menu
  8. Click “Done”

Note:

Skip Step 3 and 4 by using the Option Export Options key command Opt+X (if not default on your system, you can set up a custom key command to speed things up)

Screenshot of the Object Style Options window in InDesign

Using Object Styles for ALT Text

If you are using Object Styles in your document (great for long docs!), you can also automate the ALT text there.

  1. Create an Object Style.
  2. In the Object Style’s export options, you will see ALT Text, Tagged PDF, and ePub. Select desired option.
  3. From the dropdown menu, select  “From XMP: Headline” (or wherever you’ve stored your ALT text)
  4. Click OK to apply the changes.

Now, if you check the Object Export Options of your image that style is applied to, the ALT text should be there!

Scripts for InDesign: Accessibility

Adobe InDesign is a common application used by graphic designers.

Scripts can be used in InDesign to help designers make accessible documents, and to speed up some tasks. Below are some free scripts that I have found beneficial:

Accessibility

This add-on by Stephane Baril allows for easier access to the necessary items to set up a tagged document in InDesign (CS5+).

Its also great when teaching yourself or others the steps to create accessible documents in InDesign.

Note: This requires an Adobe  Creative Cloud subscription.

Batch Apply XMP ALT Tags to EPUB and HTML Images

This Script by Marijan Tompa is very handy if you work for someone who puts the ALT text for Images in the XML: Headline or somewhere else in the metadata of an image. Instead of applying the ALT text to each individual image through Object Export Options, you can run this script to do it for you.

Note: When I tried to run this in CS6, the Script did not work unless I moved it from the Users folder to the Application folder. See forum post, All InDesign Scripts won’t work for further information on troubleshooting this problem.

Regular installation instructions can be found at How to install scripts in InDesign.

Resources

If you are looking for general information on creating accessible documents in InDesign, I suggest:

Action Script for PDF Accessibility: Automate Properties

When working with a lot of PDFs as part of your day-to-day work, scripts to automate regular tasks can come in really handy.

The instructions below will automate some of the tasks that are often part of the workflow when creating accessible PDF documents. The tasks I am focusing on for this Script are found under *Properties* in PDF documents in *Adobe Acrobat Pro* (not Acrobat Reader). They include:

  • Add Tags to Document
  • Show Document Title
  • Show Bookmarks
  • Set the document Language
  • Run Full Accessibility Check

These instructions presume that the document is tagged and that you/your client is filling out Document Title and keywords in the original document’s File Info. If this is not the case, you’ll need to add those manually. To find out how to do this, I recommend the Accessible Digital Office Document Project (ADOD).

Screenshot of Acrobat Pro, showing the View dropdown open.

Acrobat XI:

  1. View > Tools > Action Wizard
  2. The Action Wizard panel will appear on the right hand side of your document. Select “Create New Action” from the menu. A window will appear, showing you the available options for creating an Action Script.
  3. To automate Add Tags to Document:
    1. Accessibility > Add Tags to Document.
    2. Click “Add to right hand pane,” the green plus (+) icon.
  4. Set the document’s Description, such as the document Title (if in the document Properties in Word or InDesign) and Author:
    1. Content > Add Document Description
    2. Click “Add to right hand pane,” the green plus (+) icon.
    3. Click “Specify Settings”. A box will appear with fields and check boxes.
    4. Uncheck “Prompt Use.”
      1. Note: Most existing Action Scripts have this checked, which is helpful in scenarios like training. However, prompting can be annoying when you already know what your doing. By unchecking “Prompt User” you are letting the Action Script run through its tasks without you giving it further permission.
    5. Leave the check boxes clicked for the info you want carried over from the original document. If you want something different, for example the author being Company X rather than whoever wrote the original document, you can put Company X in the Author field.
  5. Set the Initial View, such as Navigation Tab (Show Bookmarks) and Show: Document Title (not File Name)
    1. Document Processing > Set Open Options
    2. Click “Add to right hand pane,” the green plus (+) icon.
    3. Uncheck “Prompt User”
    4. Click “Specify Settings.” Under Initial View, select Bookmarks & Page, and under Window Options, you’ll see Display Document Title. Select “Yes” instead of “Leave As Is”
  6. Set Reading Language:
    1. Accessibility > Set Reading Language.
    2. Click “Add to right hand pane,” the green plus (+) icon.
    3. Uncheck “Prompt User”
    4. Click “Specify Settings.”
    5. Select English from the language options. (if you often work with documents written in other languages, you can set up different Action Scripts for French, Spanish etc).
  7. To automate running the Full Accessibility Check:
    1. Accessibility > Full Accessibility Check
    2. Click “Add to right hand pane,” the green plus (+) icon.
    3. Uncheck “Prompt User”
  8. Once you have finished applying the necessary tasks to your Action Script, select “Save”
  9. Enter the desired name and description for your Action Script.
  10. And ta-da! You’re done!

Resources:

Standardize Routine PDF Tasks

SCreenshot of the Edit Action script panel and the Manage Action Script panel in Acrobat DC

Acrobat DC

Acrobat DC comes with an Action Script called ‘Make Accessible’. However, you may not want it to do all the tasks it comes with (OCR, autotag etc) or prompt you at every step (inefficient use of time). You can either make your own Action Script, or create a revised version to suit your needs.

  1. Open Tools and scroll down to Customize.
  2. Select Action Wizard (Note: to add it to your sidebar in Acrobat for quick access in future, click ‘Add’)
  3. Select “Manage Actions” in the top navigation bar
  4. You will see a list of Actions. Select “Make Accessible” (default script) and select Copy.
  5. Enter a new or revised name
  6. With your copied script selected, click Edit.
  7. Select the actions you with to edit/delete and change as you best see fit.

Resources:

Action Wizard (Acrobat Pro DC)

Create and verify PDF accessibility (Acrobat Pro DC)

Colour Contrast Checkers for Designers

Free tools to evaluate the colour contrast and colour choices in your designs.

Colour is one of the easiest things to evaluate for Web Content Accessibility Guidelines (WCAG) compliance. Whether you’re a web designer, graphic designer, or content creator – these tools make it easy to assess whether the colour of your text is high contrast enough against it’s background for people with low vision (or anyone viewing your content in poor conditions for that matter).

My Favourite Tools

Contrast-Finder

Tanaguru’s Contrast-Finder is my favourite colour contrast checker for two reasons: not only does it provide you with an array of WCAG compliant colours when the pair you tested fails, it also has a creative sense of humour! It is also a web application, which means you can access it on a PC, Mac, or a mobile device.

Colour Contrast Analyser

Colour Contrast Analyser is a desktop application by Paciello Group allows you to sample colours from anywhere on your screen using an eye dropper to check for WCAG compliance. The Mac version is little less intuitive than the PC version, but works great. I love how easy this application makes it to test anything that comes across your computer screen!

Sim Daltonism 

Sim Daltonism  is a Mac application that gives you an idea of what images and colour combinations look like through the eyes of people with colour blindness. Its pretty cool – just drag a frame anywhere on your screen and select what vision impairment you want to replicate and boom, there it is! 

Color Palette Accessibility Evaluator

Have a whole bunch of colours you need to test against one another? NC State University online Color Palette Accessibility Evaluator can evaluate RGB or hex colour values. This is very handy when doing branding or choosing colour palettes/schemes for your designs.

Other Apps and Online Tools

As everyone works differently, here is a list of additional tools to assess colour. Tools included are for PC, Mac, mobile devices, and online web applications, the world.

Accessible Color Palette Builder

I just discovered Accessible Colour Palette Buidling and haven’t had the chance to use it in the real-world yet, but it looks like a nice product that allows you to text 6 colours against one another and see how they work together on one page. One drawback is that it doesn’t actually show you the contrast ratio of each combination, but we can get that using other tools.

Color Blind Checker

The Colour Blind Simulator by Etre allows you to upload images to see what they may look like to a person with colour vision deficiency. You can select different deficiencies from the drop-down menu to get an idea of what the image would like to various different people.

Color Check

Color Check by Etre allows you to check difference and contrast of foreground and background web colours to make sure it meets WACG 2.0 standards for readability.

Color Contrast

Color Contrast by UserLight is an Apple mobile app to test colours on a screenshot or mobile website. Test your colours on the subway, in line for coffee – anywhere on your iPhone or iPad!

Color Contrast Checker

Everyone’s favourite accessibility 101 resource, WebAIM, has their own Color Contrast Checker. It in an online application and require you to know the hex codes of your colours.

Color Safe

Input your background colour, text details and Color Safe will show you a selection of colours that meet your desired WCAG level. It allows you to preview what the text will look like and choose different text colours in a snap.

Contrast Checker

Contrast Checker by ACART Communications is an online web colour contrast checker where you can select colours through a wheel, RGB sliders, or hex. Shows text at various sizes and in grayscale. I hear it works well paired with Colour Scheme Designer by Paletton.

Contrast Connection

Contrast Connection is a Google Chrome extension “…will take a Coolors or Adobe Color palette and create an EightShapes Contrast Grid. EightShapes allows you to easily see the accessibility of multiple color combinations, and with Contrast Connection, you don’t have to copy and paste every hex code one by one.”

VisCheck

VisCheck is a free downloadable application to check an image file or website for it’s physical properties in RGB or CMYK and visual disabilities and anomalies. It is available for Windows, Linux, and Mac in English and Japanese.

photo of cupped hands lit in green and red light

Where do I find my hex codes?

You’ll need to know your hex codes when using an online colour checker. Here is how you find the colour code in common applications. Screenshots for Mac shown, but location remains the same for PC:

Screenshot of color picker window in InDesign with the hex code highlighted

InDesign/Illustrator

Double click your swatch – your hex in the number with the # next to it. If one of these boxes doesn’t show up, try another swatch location.

Screenshot of the swatch options window in InDesign with the hex code highlighted

Microsoft Office

Click the colour dropdown menu (for text or object) and select More Options. There you will see your hex.

 

Screenshot of the colors window in Word for Mac with the hex code highlighted

Have another automated colour checker to recommend? Feel welcome to comment below!