diff --git a/src/App.css b/src/App.css
index c8cb4a80e14ae5f66c4f7f4a0466a424679d2da9..8f1f8e1de21279f1e348d26a76a99dfb746f4e58 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,3 +16,10 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
+.ContrastBackColor {
+  background-color: black !important;
+}
+
+.ContrastTextColor {
+  color: yellow !important;
+}
diff --git a/src/App.js b/src/App.js
index b5a80b2f2b1902af6232cdb5c49b1ca956a4d0c0..479005eec98ac622014f236e16646cb0141c0b62 100644
--- a/src/App.js
+++ b/src/App.js
@@ -53,6 +53,7 @@ import FormationMaterialPage from "./Pages/FormationMaterialPage.js";
 import FormationMaterialIframe from "./Pages/FormationMaterialIframe.js";
 import MaterialPage from "./Pages/MaterialPage";
 import PageNotFound from "./Pages/PageNotFound.js";
+import ContrastBar from './Components/Acessibility/ContrastBar';
 
 import NoteVariables from "./Admin/Pages/Pages/SubPages/NoteVariables";
 import Institution from "./Admin/Pages/Pages/SubPages/Institutions";
@@ -94,6 +95,7 @@ import CreateRole from "./Admin/Components/Components/Inputs/CreateRole";
 import BlockedUser from "./Admin/Pages/Pages/SubPages/BlockedUsers";
 import AppBarAdmin from './Admin/Components/Components/AppBar'
 import createBrowserHistory from 'history/createBrowserHistory'
+import './App.css';
 
 export default function App() {
   // eslint-disable-next-line
@@ -155,20 +157,20 @@ export default function App() {
   const AdminTemplate = (props) => {
     if (CheckUserPermission())
       return (
-          <div style={{ backgroundColor: "	#D3D3D3" }}>
-            <AppBarAdmin />
-            <div style={{ padding: "2em" }}>
-              {props.inner}
-            </div>
+        <div style={{ backgroundColor: "	#D3D3D3" }}>
+          <AppBarAdmin />
+          <div style={{ padding: "2em" }}>
+            {props.inner}
           </div>
-        )
+        </div>
+      )
     else
       return (
         <div style={{ backgroundColor: "	#D3D3D3" }}>
-            <div style={{ padding: "2em" }}>
-              <Unauthorized />
-            </div>
+          <div style={{ padding: "2em" }}>
+            <Unauthorized />
           </div>
+        </div>
       )
   }
 
@@ -176,6 +178,7 @@ export default function App() {
     // add piwik later
     // history={piwik.connectToHistory(customHistory)}
     <BrowserRouter>
+      <ContrastBar />
       <Header />
       <div
         style={{
@@ -224,234 +227,234 @@ export default function App() {
         <Route path="/topico" component={FormationMaterialPage} />
         <Route path="/iframe-colecao" component={FormationMaterialIframe} />
         <Route path="/material-formacao" component={MaterialPage} />
-        
-        <Route 
-          path="/admin/home" 
-          exact={true} 
+
+        <Route
+          path="/admin/home"
+          exact={true}
           render={() => {
-            return <AdminTemplate inner={<Inframe/>}/>
-          }} 
+            return <AdminTemplate inner={<Inframe />} />
+          }}
         />
-        <Route 
-          path="/admin/institutions" 
+        <Route
+          path="/admin/institutions"
           render={() => {
-            return <AdminTemplate inner={<Institution />}/>
-          }} 
+            return <AdminTemplate inner={<Institution />} />
+          }}
         />
-        <Route 
-          path="/admin/institution" 
+        <Route
+          path="/admin/institution"
           render={() => {
-            return <AdminTemplate inner={<InstitutionCard />}/>
-          }} 
+            return <AdminTemplate inner={<InstitutionCard />} />
+          }}
         />
         <Route
           path="/admin/institutionEdit"
           render={() => {
-            return <AdminTemplate inner={<InstitutionsInput />}/>
+            return <AdminTemplate inner={<InstitutionsInput />} />
           }}
         />
         <Route
           path="/admin/InstitutionCreate"
           render={() => {
-            return <AdminTemplate inner={<CreateInstitution />}/>
+            return <AdminTemplate inner={<CreateInstitution />} />
           }}
         />
-        <Route 
-          path="/admin/noteVars" 
+        <Route
+          path="/admin/noteVars"
           render={() => {
-            return <AdminTemplate inner={<NoteVariables />}/>
-          }} 
+            return <AdminTemplate inner={<NoteVariables />} />
+          }}
         />
-        <Route 
-          path="/admin/noteVar" 
+        <Route
+          path="/admin/noteVar"
           render={() => {
-            return <AdminTemplate inner={<NoteVarCard />}/>
-          }} 
+            return <AdminTemplate inner={<NoteVarCard />} />
+          }}
         />
-        <Route 
-          path="/admin/noteVarEdit" 
+        <Route
+          path="/admin/noteVarEdit"
           render={() => {
-            return <AdminTemplate inner={<NoteVarInputs />}/>
-          }} 
+            return <AdminTemplate inner={<NoteVarInputs />} />
+          }}
         />
-        <Route 
-          path="/admin/languages" 
+        <Route
+          path="/admin/languages"
           render={() => {
-            return <AdminTemplate inner={<Languages />}/>
-          }} 
+            return <AdminTemplate inner={<Languages />} />
+          }}
         />
-        <Route 
-          path="/admin/languageEdit" 
+        <Route
+          path="/admin/languageEdit"
           render={() => {
-            return <AdminTemplate inner={<EditLanguage />}/>
-          }} 
+            return <AdminTemplate inner={<EditLanguage />} />
+          }}
         />
-        <Route 
-          path="/admin/languageCreate" 
+        <Route
+          path="/admin/languageCreate"
           render={() => {
-            return <AdminTemplate inner={<CreateLanguage />}/>
-          }} 
+            return <AdminTemplate inner={<CreateLanguage />} />
+          }}
         />
         <Route
           path="/admin/CommunityQuestions"
           render={() => {
-            return <AdminTemplate inner={<CommunityQuestions />}/>
+            return <AdminTemplate inner={<CommunityQuestions />} />
           }}
         />
         <Route
           path="/admin/CommunityQuestion"
           render={() => {
-            return <AdminTemplate inner={<CommunityCard />}/>
+            return <AdminTemplate inner={<CommunityCard />} />
           }}
         />
-        <Route 
-          path="/admin/Collections" 
+        <Route
+          path="/admin/Collections"
           render={() => {
-            return <AdminTemplate inner={<Collections />}/>
-          }} 
+            return <AdminTemplate inner={<Collections />} />
+          }}
         />
-        <Route 
-          path="/admin/Collection" 
+        <Route
+          path="/admin/Collection"
           render={() => {
-            return <AdminTemplate inner={<CollectionCard />}/>
-          }} 
+            return <AdminTemplate inner={<CollectionCard />} />
+          }}
         />
         <Route
           path="/admin/EditCollection"
           render={() => {
-            return <AdminTemplate inner={<EditCollection />}/>
+            return <AdminTemplate inner={<EditCollection />} />
           }}
         />
-        <Route 
-          path="/admin/Ratings" 
+        <Route
+          path="/admin/Ratings"
           render={() => {
-            return <AdminTemplate inner={<Ratings />}/>
-          }} 
+            return <AdminTemplate inner={<Ratings />} />
+          }}
         />
-        <Route 
-          path="/admin/Rating" 
+        <Route
+          path="/admin/Rating"
           render={() => {
-            return <AdminTemplate inner={<RatingCard />}/>
-          }} 
+            return <AdminTemplate inner={<RatingCard />} />
+          }}
         />
-        <Route 
-          path="/admin/EditRating" 
+        <Route
+          path="/admin/EditRating"
           render={() => {
-            return <AdminTemplate inner={<EditRating />}/>
-          }} 
+            return <AdminTemplate inner={<EditRating />} />
+          }}
         />
-        <Route 
-          path="/admin/CreateRating" 
+        <Route
+          path="/admin/CreateRating"
           render={() => {
-            return <AdminTemplate inner={<CreateRating />}/>
-          }} 
+            return <AdminTemplate inner={<CreateRating />} />
+          }}
         />
-        <Route 
-          path="/admin/Questions" 
+        <Route
+          path="/admin/Questions"
           render={() => {
-            return <AdminTemplate inner={<Questions />}/>
-          }} 
+            return <AdminTemplate inner={<Questions />} />
+          }}
         />
-        <Route 
-          path="/admin/CreateQuestion" 
+        <Route
+          path="/admin/CreateQuestion"
           render={() => {
-            return <AdminTemplate inner={<CreateQuestions />}/>
-          }} 
+            return <AdminTemplate inner={<CreateQuestions />} />
+          }}
         />
-        <Route 
-          path="/admin/activities" 
+        <Route
+          path="/admin/activities"
           render={() => {
-            return <AdminTemplate inner={<Activity />}/>
-          }} 
+            return <AdminTemplate inner={<Activity />} />
+          }}
         />
-        <Route 
-          path="/admin/activity" 
+        <Route
+          path="/admin/activity"
           render={() => {
-            return <AdminTemplate inner={<ActivityCard />}/>
-          }} 
+            return <AdminTemplate inner={<ActivityCard />} />
+          }}
         />
         <Route
           path="/admin/learningObjects"
           render={() => {
-            return <AdminTemplate inner={<EducationalObject />}/>
-          }} 
+            return <AdminTemplate inner={<EducationalObject />} />
+          }}
         />
         <Route
           path="/admin/learningObject"
           render={() => {
-            return <AdminTemplate inner={<EducationalObjectCard />}/>
-          }} 
+            return <AdminTemplate inner={<EducationalObjectCard />} />
+          }}
         />
         <Route
           path="/admin/learningObjectEdit"
           render={() => {
-            return <AdminTemplate inner={<EducationalObjectEdit />}/>
-          }} 
+            return <AdminTemplate inner={<EducationalObjectEdit />} />
+          }}
         />
-        <Route 
-          path="/admin/complaints" 
+        <Route
+          path="/admin/complaints"
           render={() => {
-            return <AdminTemplate inner={<Complaints />}/>
-          }} 
+            return <AdminTemplate inner={<Complaints />} />
+          }}
         />
-        <Route 
-          path="/admin/complaint" 
+        <Route
+          path="/admin/complaint"
           render={() => {
-            return <AdminTemplate inner={<ComplaintCard />}/>
-          }} 
+            return <AdminTemplate inner={<ComplaintCard />} />
+          }}
         />
         <Route
           path="/admin/users/teacher_requests"
           render={() => {
-            return <AdminTemplate inner={<AproveTeacher />}/> 
+            return <AdminTemplate inner={<AproveTeacher />} />
           }} />
-        <Route 
-          path="/admin/usersList" 
+        <Route
+          path="/admin/usersList"
           render={() => {
-            return <AdminTemplate inner={<UserList />}/>
-          }} 
+            return <AdminTemplate inner={<UserList />} />
+          }}
         />
-        <Route 
-          path="/admin/user" 
+        <Route
+          path="/admin/user"
           render={() => {
-            return <AdminTemplate inner={<UserCard />}/>
-          }} 
+            return <AdminTemplate inner={<UserCard />} />
+          }}
         />
-        <Route 
-          path="/admin/EditUser" 
+        <Route
+          path="/admin/EditUser"
           render={() => {
-            return <AdminTemplate inner={<EditUser />}/>
-          }} 
+            return <AdminTemplate inner={<EditUser />} />
+          }}
         />
-        <Route 
-          path="/admin/permissions" 
+        <Route
+          path="/admin/permissions"
           render={() => {
-            return <AdminTemplate inner={<UserPermissions />}/>
-          }} 
+            return <AdminTemplate inner={<UserPermissions />} />
+          }}
         />
-        <Route 
-          path="/admin/EditPermissions" 
+        <Route
+          path="/admin/EditPermissions"
           render={() => {
-            return <AdminTemplate inner={<EditRole />}/>
-          }} 
+            return <AdminTemplate inner={<EditRole />} />
+          }}
         />
-        <Route 
-          path="/admin/CreateRole" 
+        <Route
+          path="/admin/CreateRole"
           render={() => {
-            return <AdminTemplate inner={<CreateRole />}/>
-          }} 
+            return <AdminTemplate inner={<CreateRole />} />
+          }}
         />
-        <Route 
-          path="/admin/BlockedUsers" 
+        <Route
+          path="/admin/BlockedUsers"
           render={() => {
-            return <AdminTemplate inner={<BlockedUser />}/>
-          }} 
+            return <AdminTemplate inner={<BlockedUser />} />
+          }}
         />
-        <Route 
-          path="/admin/sendEmail" 
+        <Route
+          path="/admin/sendEmail"
           render={() => {
-            return <AdminTemplate inner={<SendEmail />}/>
-          }} 
+            return <AdminTemplate inner={<SendEmail />} />
+          }}
         />
 
         <Route path='*' component={PageNotFound} />
diff --git a/src/Components/Acessibility/ContrastBar.css b/src/Components/Acessibility/ContrastBar.css
new file mode 100644
index 0000000000000000000000000000000000000000..278dbe0d2b73e15816d2b330fc2c056d7d2fbcb0
--- /dev/null
+++ b/src/Components/Acessibility/ContrastBar.css
@@ -0,0 +1,79 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+
+.contrastButton{
+  border: none;
+  padding: 0;
+  background: none;
+  background-color: white;
+}
+.contrastButton:active {
+  border: none;
+  padding: 0;
+  background: none;
+  background-color: white;
+}
+.bar{
+  background-color: white;
+  width: 100%;
+  height: 18px; 
+}
+
+.Contrastbar{
+  background-color: black;
+  width: 100%;
+  height: 18px;
+  border-bottom: 1px solid white;
+}
+
+.text{
+  color: grey;
+  cursor: pointer;
+  width: 140px;
+  font-size: 13px;
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: center;
+  vertical-align: middle;
+  overflow: auto;
+}
+
+.Contrasttext{
+  color: yellow;
+  text-decoration: underline;
+  cursor: pointer;
+  width: 140px;
+  font-size: 13px;
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.textRight {
+  float:right;
+  height:100%;
+  display: flex;
+  font-size: 13px;
+}
+.textLeft {
+  float:left;
+  height:100%;
+  font-size: 13px;
+}
\ No newline at end of file
diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..88040c983496b07d525c94acab701e71c6bbfb99
--- /dev/null
+++ b/src/Components/Acessibility/ContrastBar.js
@@ -0,0 +1,109 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React from 'react';
+import './ContrastBar.css';
+import ContrastImageOn from '../../img/OnContrastIcon.png';
+import ContrastImageOff from '../../img/OffContrastIcon.png';
+import { Store } from '../../Store';
+
+/**
+ * Bar allowing for the toggle of the high contrast mode on the page.
+ */
+function ContrastBar() {
+  /* eslint-disable */
+
+  // Hook to set contrast context
+  const { state, dispatch } = React.useContext(Store);
+
+
+  const setContrastAction = (newContrast) => {
+    console.log(newContrast)
+    return dispatch({
+      type: 'SET_CONTRAST',
+      payload: newContrast
+    })
+  }
+
+  const setFontSizeAction = (newFontSize) => {
+    return dispatch({
+      type: 'SET_FONT_SIZE',
+      payload: newFontSize
+    })
+  }
+
+  React.useEffect(() => { }, [state]);
+
+  const toggleContrast = () => {
+    var status = (state.contrast === '' ? 'Contrast' : '')
+    setContrastAction(status)
+  }
+  const incrementFontSize = () => {
+    document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px";
+    setFontSizeAction(parseInt(state.fontSize, 10) + 1);
+  }
+  const decrementFontSize = () => {
+    document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px";
+    setFontSizeAction(parseInt(state.fontSize, 10) - 1);
+  }
+  const defaultFontSize = () => {
+    setFontSizeAction(15);
+    document.getElementsByTagName("body")[0].style.fontSize = "15px";
+  }
+
+  return (
+    <React.Fragment>
+      <div className={`${state.contrast}bar`}>
+        <div className='textLeft hide-on-small-and-down'>
+          <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1">
+            Conteúdo 1
+          </a>
+          <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2">
+            Menu 2
+        </a>
+          <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3">
+            Rodapé 3
+        </a>
+        </div>
+        <div className='textRight'>
+          <div>
+            <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
+              A+
+          </a>
+            <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte">
+              A-
+          </a>
+            <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte">
+              A
+          </a>
+          </div>
+          <div onClick={toggleContrast}>
+            <a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
+              <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" />
+            Contraste
+          </a>
+          </div>
+
+        </div>
+      </div>
+    </React.Fragment>
+  );
+
+}
+
+export default ContrastBar;
\ No newline at end of file
diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index 0d249401c851757d490eff07d316748ddad437c0..3a3eb3bda3738b19ef1d94bedf62b625c1614a18 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -115,7 +115,7 @@ export default function ActivityListItem(props) {
     }, [])
 
     return (
-        <StyledListItem onMenuBar={props.onMenuBar}>
+        <StyledListItem onMenuBar={props.onMenuBar} contrast={props.contrast}>
             {
                 !props.onMenuBar &&
                 <>
@@ -138,10 +138,10 @@ export default function ActivityListItem(props) {
                 }
                 secondary={
                     <div>
-                       
+
                         <span>
                             <Link to={{
-                                pathname:  props.ownerHref,
+                                pathname: props.ownerHref,
                                 state: '0',
                             }} className="owner-name-a" >{props.ownerName}</Link> {activity.text} <Link to={props.recipientHref} className="recipient-name-a">{props.recipientName}</Link> {activity.text2}
                         </span>
@@ -167,8 +167,9 @@ const StyledListItem = styled(ListItem)`
 
     .time-ago-span {
     	font-size : 12px;
-	font-family : 'Lato', medium;
-	color : #787380;
+        font-family : 'Lato', medium;
+        color: ${props => props.contrast === '' ? "#787380" : "yellow"};
+        color : #787380;
     }
 
     .owner-name-a {
diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js
index cc064489e05b8550c0b787fc7b15a13fa156a758..ed2521323603ac4ab1b6611db5090da37577099e 100644
--- a/src/Components/Dropdown.js
+++ b/src/Components/Dropdown.js
@@ -73,10 +73,10 @@ export default function PositionedPopper(props) {
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
             <Paper>
-              <MenuList>
+              <MenuList className={`${state.contrast}BackColor`}>
                 {
                   props.items.map((item) =>
-                    <Link onClick={handleItemClicked} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
+                    <Link onClick={handleItemClicked} className={`${state.contrast}TextColor`} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
                   )
                 }
               </MenuList>
@@ -85,7 +85,8 @@ export default function PositionedPopper(props) {
         )}
       </Popper>
       <Button
-        style={{ textTransform: "none", fontSize: "14px" }}
+        className={`${state.contrast}TextColor`}
+        style={{ textTransform: "none" }}
         aria-controls="menu-list-grow"
         aria-haspopup="true"
         onClick={handleClick('bottom')}
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index c79d52b6f2cefa5ccf8b2e9ab5b65c5db26a5883..436cf2d7f0176c0039cbd8bb087c1772a9810e7c 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -158,18 +158,18 @@ export default function MenuBar(props) {
   const minhaArea = buildMyAreaTabs()
 
   return (
-    <ContainerStyled fluid={true} >
+    <ContainerStyled fluid={true} className={`${state.contrast}BackColor`}>
       <Left>
         <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
         <Dropdown name="Sobre" items={menuSobre} />
         <Dropdown name="Ajuda" items={menuAjuda} />
         <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
-          <ButtonStyled >Educação Conectada</ButtonStyled>
+          <ButtonStyled className={`${state.contrast}TextColor`} >Educação Conectada</ButtonStyled>
         </a>
         {/*<Link to="/loja">
             <ButtonStyled>Lojinha</ButtonStyled>
         </Link>*/}
-        <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
+        <ButtonStyled className={`${state.contrast}TextColor`} onClick={props.openSearchBar} ><IconSearchStyled className={`${state.contrast}TextColor`} />Buscar</ButtonStyled>
 
       </Left>
       <Right>
@@ -179,9 +179,9 @@ export default function MenuBar(props) {
               <>
                 <div style={{ boxSizing: "border-box" }}>
                   <Link to="/termos-publicar-recurso">
-                    <ButtonPublicarRecurso>
-                      <CloudUploadIcon style={{ color: "white", marginLeft: "0" }} />
-                      <span style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
+                    <ButtonPublicarRecurso className={`${state.contrast}BackColor`}>
+                      <CloudUploadIcon className={`${state.contrast}TextColor`} style={{ color: "white", marginLeft: "0" }} />
+                      <span className={`${state.contrast}TextColor`} style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
                         PUBLICAR RECURSO
                       </span>
                     </ButtonPublicarRecurso>
@@ -198,9 +198,9 @@ export default function MenuBar(props) {
             )
             : (
               <React.Fragment>
-                <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
-                <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
-                <ButtonStyled onClick={props.openSignUp}>Cadastre-<span style={{textTransform: 'lowercase'}}>se</span></ButtonStyled>
+                <ButtonPubRecursoStyled className={`${state.contrast}TextColor`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
+                <ButtonStyled className={`${state.contrast}TextColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}TextColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
+                <ButtonStyled className={`${state.contrast}TextColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
               </React.Fragment>
             )
         }
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index c8fbe2ae21be7c1b7897c603034785e9e345e2b9..16c5071331f1c9fab091322542e4f87d8fd20801 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.js
@@ -15,7 +15,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import { Button } from '@material-ui/core';
 import Badge from '@material-ui/core/Badge';
@@ -28,6 +28,7 @@ import { withStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom'
 import { getRecipientHref } from './Activities/getRecipientHref.js'
 import SnackBar from '../Components/SnackbarComponent'
+import { Store } from '../Store';
 
 const StyledBadge = styled(Badge)`
     .MuiBadge-dot-45{
@@ -75,6 +76,7 @@ const StyledMenu = withStyles({
 
 export default function Notification(props) {
     const [anchorEl, setAnchorEl] = React.useState(null);
+    const { state } = useContext(Store);
     const [notifications, setNotifications] = useState([]);
     const [snack, setSnack] = useState({
         open: false,
@@ -187,7 +189,7 @@ export default function Notification(props) {
             />
             <StyledNotificationButton onClick={handleClick}>
                 <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
-                    <StyledNotificationsIcon />
+                    <StyledNotificationsIcon className={`${state.contrast}TextColor`} />
                 </StyledBadge>
             </StyledNotificationButton>
             <StyledMenu
@@ -196,8 +198,9 @@ export default function Notification(props) {
                 keepMounted
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
+                contrast={state.contrast}
             >
-                <ContainerDiv>
+                <ContainerDiv contrast={state.contrast}>
                     <div className="cabecalho">
                         <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES •</span>
                         <span className="cabecalho-marcar" onClick={handleClickNotification}>Marcar todas como lidas</span>
@@ -206,6 +209,7 @@ export default function Notification(props) {
                         notifications.map((notification) =>
                             (notification.viewed === false) &&
                             <ActivityListItem
+                                contrast={state.contrast}
                                 onMenuBar={true}
                                 avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
                                 activity={notification.activity}
@@ -247,11 +251,12 @@ const ContainerDiv = styled.div`
     overflow-y : scroll;
     padding : 5px 5px 5px 5px;
     min-width : 160px;
-    background-color : #f1f1f1;
+    background-color: ${props => props.contrast === '' ? "#f1f1f1" : "black"};
 
     .cabecalho {
         border-bottom : 1px solid #dadada;
         padding : 10px 15px;
+        color: ${props => props.contrast === '' ? "black" : "yellow"};
 
         .cabecalho-marcar {
             font-family: Lato,bold;
diff --git a/src/Store.js b/src/Store.js
index 0cb5c0333ff49866a8125e8eb30e88582a815db9..6b8598b60a56213ce5f355eff17e67ede4370736 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -21,158 +21,170 @@ import React from 'react'
 export const Store = React.createContext()
 
 const initialState = {
-  searchOpen: false,
-  userIsLoggedIn : false,
-  userAgreedToPublicationTerms: false,
-  userAgreedToPublicationPermissions: false,
-  modalColaborarPlataformaOpen : false,
-  search: {
-    query: '*',
-    class: 'LearningObject'
-  },
-  windowSize: {
-    width: 0,
-    height: 0
-},
-  currentUser: {
-      askTeacherQuestion : false,
-      id : '',
-      name : '',
-      email : '',
-      avatar : '',
-      cover : '',
-      uid : '',
-      follows_count : 0,
-      collections_count : 0,
-      submitter_request : 'default',
-      roles : []
-  }
+    searchOpen: false,
+    userIsLoggedIn: false,
+    userAgreedToPublicationTerms: false,
+    userAgreedToPublicationPermissions: false,
+    modalColaborarPlataformaOpen: false,
+    search: {
+        query: '*',
+        class: 'LearningObject'
+    },
+    windowSize: {
+        width: 0,
+        height: 0
+    },
+    currentUser: {
+        askTeacherQuestion: false,
+        id: '',
+        name: '',
+        email: '',
+        avatar: '',
+        cover: '',
+        uid: '',
+        follows_count: 0,
+        collections_count: 0,
+        submitter_request: 'default',
+        roles: []
+    },
+    contrast: '',
+    fontSize: 15,
 }
 
 
 
 function reducer(state, action) {
-  switch (action.type){
-    case 'SAVE_SEARCH':
-      return {
-        ...state,
-        search: action.newSearch
-      }
-    case 'HANDLE_SEARCH_BAR':
-      return {
-        ...state,
-        searchOpen: action.opened
-      }
-    case 'WINDOW_SIZE':
-      return {
-        ...state,
-        windowSize: action.innerWindow
-      }
-    case 'USER_LOGGED_IN':
-        if (action.login.avatar_file_name) {
-            Object.defineProperty(action.login, 'avatar',
-                Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name'));
-            delete action.login['avatar_file_name'];
-        }
-        if (action.login.cover_file_name) {
-            Object.defineProperty(action.login, 'cover',
-                Object.getOwnPropertyDescriptor(action.login, 'cover_file_name'));
-            delete action.login['cover_file_name'];
-        }
-      return {
-          ...state,
-          userIsLoggedIn:action.userLoggedIn,
-          currentUser:action.login
+    switch (action.type) {
+        case 'SET_CONTRAST':
+            return {
+                ...state,
+                contrast: action.payload
+            };
+        case 'SET_FONT_SIZE':
+            return {
+                ...state,
+                fontSize: action.payload
+            };
+        case 'SAVE_SEARCH':
+            return {
+                ...state,
+                search: action.newSearch
+            }
+        case 'HANDLE_SEARCH_BAR':
+            return {
+                ...state,
+                searchOpen: action.opened
+            }
+        case 'WINDOW_SIZE':
+            return {
+                ...state,
+                windowSize: action.innerWindow
+            }
+        case 'USER_LOGGED_IN':
+            if (action.login.avatar_file_name) {
+                Object.defineProperty(action.login, 'avatar',
+                    Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name'));
+                delete action.login['avatar_file_name'];
+            }
+            if (action.login.cover_file_name) {
+                Object.defineProperty(action.login, 'cover',
+                    Object.getOwnPropertyDescriptor(action.login, 'cover_file_name'));
+                delete action.login['cover_file_name'];
+            }
+            return {
+                ...state,
+                userIsLoggedIn: action.userLoggedIn,
+                currentUser: action.login
+            }
+        case 'USER_SIGNED_UP':
+            return {
+                ...state,
+                userIsLoggedIn: action.userLoggedIn,
+                currentUser: action.user
+            }
+        case 'USER_LOGGED_OUT':
+            localStorage.clear()
+            return {
+                ...state,
+                userIsLoggedIn: action.userLoggedOut,
+                currentUser: {
+                    askTeacherQuestion: false,
+                    id: '',
+                    name: '',
+                    email: '',
+                    avatar_file_name: '',
+                    cover_file_name: '',
+                    uid: '',
+                    follows_count: 0,
+                    collections_count: 0,
+                    submitter_request: 'default',
+                    roles: []
+                },
+                userAgreedToPublicationTerms: false,
+                userAgreedToPublicationPermissions: false
+            }
+        case 'USER_AGREED_TO_PUBLICATION_TERMS':
+            return {
+                ...state,
+                userAgreedToPublicationTerms: action.userAgreement
+            }
+        case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS':
+            return {
+                ...state,
+                userAgreedToPublicationPermissions: action.userAgreement
+            }
+        case 'USER_ACCESSED_USER_PAGE':
+            return {
+                ...state,
+                currentUser: action.set
+            }
+        case 'USER_CHANGED_COVER':
+            return {
+                ...state,
+                currentUser: action.currUser
+            }
+        case 'USER_DELETED_ACCOUNT':
+            localStorage.clear()
+            return {
+                ...state,
+                userIsLoggedIn: false,
+                currentUser: {
+                    askTeacherQuestion: false,
+                    id: '',
+                    name: '',
+                    email: '',
+                    avatar_file_name: '',
+                    cover_file_name: '',
+                    uid: '',
+                    follows_count: 0,
+                    collections_count: 0,
+                    submitter_request: 'default',
+                    roles: []
+                },
+            }
+        case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA':
+            return {
+                ...state,
+                modalColaborarPlataformaOpen: action.modalColaborarPlataformaOpen
+            }
+        case 'GET_USER':
+            return {
+                ...state,
+                currentUser: action.user
+            }
+        case 'USER_UPDATED_EMAIL':
+            return {
+                ...state,
+                currentUser: action.currUser
+            }
+        default:
+            return state
     }
-    case 'USER_SIGNED_UP':
-      return {
-          ...state,
-          userIsLoggedIn:action.userLoggedIn,
-          currentUser:action.user
-    }
-    case 'USER_LOGGED_OUT':
-        localStorage.clear()
-        return {
-            ...state,
-            userIsLoggedIn:action.userLoggedOut,
-            currentUser:{
-                askTeacherQuestion : false,
-                id : '',
-                name : '',
-                email : '',
-                avatar_file_name : '',
-                cover_file_name : '',
-                uid : '',
-                follows_count : 0,
-                collections_count : 0,
-                submitter_request : 'default',
-                roles : []
-            },
-            userAgreedToPublicationTerms: false,
-            userAgreedToPublicationPermissions: false
-        }
-    case 'USER_AGREED_TO_PUBLICATION_TERMS':
-        return {
-            ...state,
-            userAgreedToPublicationTerms: action.userAgreement
-        }
-    case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS':
-        return {
-            ...state,
-            userAgreedToPublicationPermissions : action.userAgreement
-        }
-    case 'USER_ACCESSED_USER_PAGE':
-        return {
-            ...state,
-            currentUser : action.set
-        }
-    case 'USER_CHANGED_COVER':
-        return {
-            ...state,
-            currentUser : action.currUser
-        }
-    case 'USER_DELETED_ACCOUNT':
-        localStorage.clear()
-        return {
-            ...state,
-            userIsLoggedIn:false,
-            currentUser: {
-                askTeacherQuestion : false,
-                id : '',
-                name : '',
-                email : '',
-                avatar_file_name : '',
-                cover_file_name : '',
-                uid : '',
-                follows_count : 0,
-                collections_count : 0,
-                submitter_request : 'default',
-                roles : []
-            },
-        }
-    case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA':
-        return {
-            ...state,
-            modalColaborarPlataformaOpen : action.modalColaborarPlataformaOpen
-        }
-    case 'GET_USER':
-        return {
-            ...state,
-            currentUser:action.user
-      }
-    case 'USER_UPDATED_EMAIL':
-        return {
-            ...state,
-            currentUser : action.currUser
-        }
-    default:
-      return state
-  }
 }
 
 export function StoreProvider(props) {
     const [state, dispatch] = React.useReducer(reducer, initialState);
-    const value = { state, dispatch };  
+    const value = { state, dispatch };
     return (
         <Store.Provider value={value}>
             {props.children}
diff --git a/src/env.js b/src/env.js
index 7284c42754e5c679138196c2bae2a2f128779c2b..95815e96e0a4b6d934c32704a85f04284e77d16e 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,7 +17,7 @@ You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
 
-var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
   apiVersion = 'v1',
   apiUrl = apiDomain + '/' + apiVersion;
 
diff --git a/src/img/OffContrastIcon.png b/src/img/OffContrastIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f44e653f9499dec5cfc293de994c1081ff9c64ec
Binary files /dev/null and b/src/img/OffContrastIcon.png differ
diff --git a/src/img/OnContrastIcon.png b/src/img/OnContrastIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ae2fd847b997f007110cfb4d85930f639714ab5
Binary files /dev/null and b/src/img/OnContrastIcon.png differ